always fit ima
I hate this kind of code:
<picture>
<source media="(min-width: 1024px)" srcset="opera-fullshot.webp" type="image/webp">
<source media="(min-width: 1024px)" srcset="opera-fullshot.jpg">
<source srcset="opera-closeup.webp" type="image/webp">
<img src="opera-closeup.jpg" alt="The Oslo Opera House">
</picture>
Is it possible to have one url that automagically fits the image just like this I think:
https://docs.imgix.com/apis/url/size/fit
Aspect ratio on mobile is portrait and for desktop landscape.
I hope this is possible.
-
Hello Ischa,
The imgix functionality that you point to crops images to a given height and width in different ways. Cloudinary provides the same functionality, using the `c_` crop transformation: http://cloudinary.com/documentation/image_transformation_reference#crop_parameter
The `<picture>` code that you include does two things, which are not focused on image *creation* (like Imgix's fit and Cloudinary's crop), but rather image *delivery*:
- It supplies WebPs to browsers that support WebP, falling back to JPEG versions in browsers that don't support WebP. Cloudinary can do this with a single URL using the `f_auto` transformation: http://cloudinary.com/blog/adaptive_browser_based_image_format_delivery
- It supplies differently-cropped versions of the image to different users, depending on the width of their viewport (viewports narrower than 1024px get a "closeup" version, while viewports wider than that get a "fullshot"). Cloudinary does *not* provide a way to do this with a single URL.
Here's an example of how to do what I think you want to do, with `<picture>` and Cloudinary: https://codepen.io/eeeps/pen/BdoXRN
Does that help?
0 -
That does help a little but what I really want is just this and that cloudinary does all the magic.
When there is portrait space on mobile just fill it and landscape space on desktop, just fill it.
<img src="[cloudinary-img-url]">0 -
Unfortunately, Cloudinary is not yet that magical (:
It's possible that we’ll be able to implement something like what you describe using Client Hints, but right now, they are only supported in Chrome (and we only support *scaling* images in response to the space available on the layout – not cropping aka “art directing” them). http://cloudinary.com/blog/automatic_responsive_images_with_client_hints
In the meantime, you might be able to implement something like this yourself by leveraging Cloudinary’s JavaScript library, which can wait until the page’s CSS is loaded and layout is complete before requesting an image. https://github.com/cloudinary/cloudinary_js
Are there technical reasons that you *can’t* use markup like the <picture> example I sent you? Or is it purely about ease-of-use?
0 -
It's just the ease of use, then I just have to use and try with picture or something like that. Not that problem but it would be so nice :)
0
Post is closed for comments.
Comments
4 comments