Forum Academy Marketplace Showcase Pricing Features

CSS object-fit: cover in the New Responsive (Beta)

All information has been entered correctly, I believe. However, it doesn’t work. Here are screenshots of the screen. Someone please help me to accomplish this. I need that by responsively reducing the screen size, an image is cropped without being resized. I need to keep height and cut the width as the canvas shrinks. Thank you very much for the kind soul who will help me.

id attribute
seting image

So let me sum it up: you’d like the image height to always stay the same, but when the canvas shrinks, the width of the image shrinks too, resulting in the image being cropped?

If so, I think this is the CSS snippet you need:

    height:50px; /*set the height of the image*/
    object-fit: cover; /*this ensures the image occupies the entirety of the height specified above */
    object-position: 100% 0; /*this defines from where the image will be cropped as it shrinks*/
    max-width:100%; /*you define the maximum value for the width. If the image is placed in a container that has a relative position, the image will not exceed its width  */ 
    flex:none; /*useful in case the image is in a container that has a display:flex; property */

I think the issue was that you set the width of the image — preventing it from shrinking altogether. As long as you set the height of an image, its width should be calculated automatically so that the image keeps its original aspect ratio. So no need to specify it.


This topic was automatically closed after 70 days. New replies are no longer allowed.