Clip property

Asked

Viewed 38 times

1

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

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

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

No matter the height size the image will always stay at the size of 542px due to cropping.

Because if I determine a fixed size with CSS in the image it ends up being flattened.

javascript html jquery css

  • Place object-fit:cover in the style of the img tag, so you can set the size and the image is not flattened. That property kind of makes the img behave like a background-image ai vc can put the heig she does not flatten. If you solve your problem tell me that I make an answer with more details

  • @hugocsl without success.

  • Guy puts his code in HTML/CSS so we can simulate this problem. Only with the report do not help much more...

  • @hugocsl, error in failure, typed wrong property, worked using Object-fit:cover. Thanks <3

  • Eduardo made a slightly more complete reply with source and reference link, so you can leave it as solved if it solved your problem. So it is not listed as unresolved open question.

1 answer

1


According to your account you can use the property object-fit:cover to get around the problem of flattening the image. As stated in the comment it prevents the image from flattening, as it will behave like a background-imagem.

See the example to better understand. Note that the image is 400px wide, but with the object-fit:cover she doesn’t get flattened.

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 practical use examples https://www.w3schools.com/css/css3_object-fit.asp

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.