Img标签大小百分比

Question

我一直在网上寻找答案，所以我不必发帖，但我找不到解决方案！我正在使用引导程序中的旋转木马，我的图像不适合。我把转盘放在一个名为"；幻灯片"；。我在幻灯片上设置了宽度和高度，并设置了背景色，使其更容易看到。当我在img上以百分比a设置宽度时，它会调整大小以占据其父容器的整个宽度。但是当我在img上设置高度时，它会使图像变得巨大！！我想拉伸图像以适应，我不在乎保持原始比例。此外，如果我以像素或vh为单位设置高度，它会产生影响，唯一不起作用的是百分比。伙计们，我在这里错过了什么？

宽度100%

代码

高度100%

代码

Answer 1

.slide {
width: 300px;
height: 300px;
overflow: hidden;
background: #000;
}
.slide img {
width: 100%;
height: 100%;
object-fit: contain; /* When you use Contain proparty you can see full image with black background*/
object-fit: cover; /* When you use cover proparty you can see it's cover a box as per main div width */
}

<!-- Here I use Display flex instant of float right -->
<div class="slide">
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>

我的建议是你可以使用封面CSS。