Clip Property

Navigation
1

I'm using the clip property in a tag to make a cut in the bottom of it, however this image will be dynamic, the size of the width is fixed but the size of the height will be dynamic.

So if I have an image with height: 1000px; and the property clip-path: inset(0px 0px 10px 0px); will crop 10px from the bottom of the image.

But I need to make a 100% cut of the bottom of the image if the height is greater than 542px.

Regardless of the size of the height the image will always get the size of 542px because of the cutout.

If I determine a fixed size with CSS in the image it will get flattened.

    
asked by anonymous 06.06.2018 / 20:38

1 answer

1

According to your report you can use the object-fit:cover property to work around the image flattening problem. As stated in the comment, it prevents the image from flattening because it will behave like background-imagem .

See the example to understand better. Notice that the image is 400px wide, but with object-fit:cover it does not flatten. 

body {display:flex}
img.fit {
    width:200px;
    height:400px;
    object-fit:cover;
}
<h2>SEM object-fit</h2>
<img src="https://placecage.com/401/201"alt="Paris" width="200" height="300">

<h2>COM object-fit</h2>
<img class="fit" src="https://placecage.com/401/201"alt="Paris" width="400" height="300">

Basic documentation with practice examples link

    
06.06.2018 / 21:39
Dynamic background with CSS? How to make? Adding platform to the Xamarin project already created