CSS 删除图像周围的空白

Question

I'm using an image from Amazon directly on my website, so I can't manually trim it in an image editing program. Around the image is lots of white space, which is annoying because under this image, there is text. And this makes the gap between the image and the text under it really big (because of said white space at the bottom of the image).

Also, every image contains a different amount of white space, so I can't just set a fixed negative margin-bottom .

I know that mix-blend-mode: multiply; makes the white space transparent, but the gap is still there because the white (now transparent part) still takes up space in the layout.

How do I make the white part go away so other html elements can use that space?

Here's a codepen: https://codepen.io/AlessioG/pen/VweqMEg

Answer 1

You can use the object-fit css property to crop the image.

Set the container div to the cropped size that you want the image to be, and set the image to that same width and height, then use object-fit on the image.

<div id="crop-container">
    <img id="crop-image">
</div>

#crop-container {
    width:200px;
    height:200px;
}

#crop-image {
    object-fit:cover;
    width:200px;
    height:200px;
}

Answer 2

Just use object-fit and then assign a higher number to width than height in proportion. Please dont use element names like div p or id names etc. Since it is pretty hard to overwrite that.

 .image { margin: 0; object-fit: cover; width: 250px; height: 200px; }.header-two { margin: 10px; font-weight: bold; display: block; font-size: 20px; }

 <div class="container"> <img class="image" src="https://i.imgur.com/l2QrzBg.jpg"> <h2 class="header-two">This is a text</h1> </div>