CSS删除图像周围的空白

Question

我在我的网站上直接使用来自亚马逊的图像，因此我无法在图像编辑程序中手动修剪它。 图片周围有很多空白，这很烦人，因为在这张图片下，有文字。这使得图像和它下面的文本之间的差距非常大（因为图像底部的空白区域）。

另外，每张图片都包含不同数量的空白，所以我不能只设置一个固定的负数margin-bottom。

我知道mix-blend-mode: multiply; 使空白区域透明，但间隙仍然存在，因为白色（现在是透明部分）仍然占用布局中的空间。

如何让白色部分消失，以便其他 html 元素可以使用该空间？

这是一个代码笔：https://codepen.io/AlessioG/pen/VweqMEg

Answer 1

您可以使用 object-fit css 属性来裁剪图像。

将容器 div 设置为您希望图像的裁剪大小，并将图像设置为相同的宽度和高度，然后在图像上使用 object-fit。

<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

只需使用 object-fit，然后按比例为宽度分配比高度更大的数字。请不要使用 div p 或 id 名称等元素名称。因为它很难覆盖。

.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>