我直接在我的网站上使用来自亚马逊的图片,所以我不能在图像编辑程序中手动修剪它。图像周围是大量的空白,这是令人讨厌的,因为在这个图像下,有文字。这使得图像与其下的文本之间的差距非常大(因为图像底部有空白处)。
而且,每个图像都包含不同数量的空白,所以我不能仅仅设置一个固定的负margin-bottom
。
我知道mix-blend-mode: multiply;
使空白透明,但是空白仍然存在,因为白色(现在是透明的部分)仍然占用布局中的空间。
如何使白色部分消失,以便其他html元素可以使用该空间?
发布于 2020-07-20 11:25:56
您可以使用对象匹配css属性来裁剪图像.
将容器div设置为您希望图像的裁剪大小,并将图像设置为相同的宽度和高度,然后在图像上使用object。
<div id="crop-container">
<img id="crop-image">
</div>
#crop-container {
width:200px;
height:200px;
}
#crop-image {
object-fit:cover;
width:200px;
height:200px;
}
发布于 2020-07-20 11:36:00
只需使用对象匹配,然后按比例分配比高度宽更高的数字。请不要使用元素名,如div或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>
发布于 2022-03-19 16:15:15
如果您有CSS,您可以为img分配一个显示块。
https://stackoverflow.com/questions/63002184
复制相似问题