Object-fit: Cover and Srcset

Question

I am using object-fit: cover on a bunch of images. The frame for the image takes up 50vw and has a dynamic height. The cover attribute works great, but it means that I don't really know how wide my actual image will be at a given time.

Most likely it will be wider than the 50vw and will have its overflow hidden due to the object-fit cover.

The problem comes in when I try to use srcset. I am unable to give a reliable width for the sizes attribute.

I know that size only needs an approximation, but I am curious if anyone has dealt with this before.

Answer 1

Your question arises the problem of art direction combined with the problem of content delivery. Art direction is essentialy the decisions you make for the format of your content (i.e. when refferring to images: wide image, close-up, portrait, square etc.), the solution is to create differrent, cropped versions of your photo and use them accordingly with the srcset attribute, for instance you may have a wide image that on small screen should be "cropped", thus you would use something like this:

<picture>   <source media="(max-width: 799px)" srcset="wide-image-480w-close-up.jpg">   <source media="(min-width: 800px)" srcset="wide-image-800w.jpg">   <img src="wide-image-800w.jpg" alt="A wide image"> </picture> 

The other problem, that of content delivery is what content is being delivered and when, this is also solvable with the srcset attribute mentioned above.

Your case seems to be dependent on both height and width of the container of the image, so you should be looking for breakpoints in your aspect ratios so the example should feature aspect-ratio rule like this

<picture>   <source media="(min-aspect-ratio: 8/5)" srcset="wide-image-480w-close-up.jpg">   <source media="(max-aspect-ratio: 3/2)" srcset="wide-image-800w.jpg">   <img src="wide-image-800w.jpg" alt="A wide image"> </picture> 

However in some instances you may need more granular control as aspect ratio and width of the viewport may not correlate with the image used so you should watch for the width as well, this is accomplished by using the and operator in your @media rule, so the above can combine into this:

<picture>    <source media="(max-width: 799px) and (min-aspect-ratio: 8/5)" srcset="wide-image-480w-close-up.jpg">    <source media="(min-width: 800px) and (max-aspect-ratio: 3/2)" srcset="wide-image-800w.jpg">    <img src="wide-image-800w.jpg" alt="A wide image"> </picture> 

On final note I would like to point out that there are great services that provide powerful API's for image processing that make these kind of problems a breeze, also there is great content online regarding art direction and source content delivery, especially on the MDN's website, over here

UPDATE: We now have another css declaration that allows loose control over aspect ratios, it probably still can't provide a very concrete way of controlling the art direction completly but there are ways in which it would prove useful. The word is about apect-ratio css declaration and is very nicely explained in the following article: “Weak declaration”