Question

我在我的网站上直接使用了Amazon的图像，因此无法在图像编辑程序中手动进行修剪。图像周围有很多空白，这很烦人，因为在此图像下方有文字。这会导致图片和其下的文字之间的差距非常大（由于图片底部的空白）。

此外，每个图像都包含不同数量的空白，因此我不能只设置固定的负数margin-bottom。

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

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

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

Answer 1

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

将容器div设置为所需图像的裁剪大小，并将图像设置为相同的宽度和高度，然后在图像上使用对象适合度。

<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

只需使用对象拟合，然后按比例向宽度分配一个比高度更大的数字。请不要使用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>

CSS删除图像周围的空白

2 个答案: