HTML CSS图像不适合父类

Question

我有一个基于Bootstrap:的网站

<div class="row padding_zero">
<div class="col section px-0">
<img class="img-trans padding_zero" src="./svg/clouds-00.svg" style="margin-top: -150px"/>
</div>
</div>
<div class="row padding_zero">
<h1 class="pick_your_color animate">Choose Your Color</h1>
</div>
.img-trans {
position: absolute;
bottom: 0;
z-index: 0;
}
.section {
height: 100vh;
position: relative;
}

我有一个问题，图像总是从父div输出，知道问题是什么吗？

Answer 1

您可以使用object-fit来调整具有父元素的元素的大小。

1. fill：这是根据与长宽比无关
2. 包含：通过考虑纵横比，它缓存图像根据家长的说法
3. 封面：图片填充了你盒子的高度和宽度再次保持其纵横比，但经常裁剪图像
4. none：无论父级大小，都会显示图像
5. 按比例缩小：图像比较了两者之间的差异包括以找到混凝土对象的最小尺寸

.img-trans {
position: absolute;
bottom: 0;
z-index: 0;
object-fit: fill;
}

Answer 2

.img-trans {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
z-index: 0;
}

因为您的图像大小可能大于其父图像大小，您必须定义图像的宽度和高度。