时间戳

首页 > 解决方案 > 以百分比表示的 Img 标签大小

html - 以百分比表示的 Img 标签大小

问题描述

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

宽度 100%

代码

身高 100%

代码

标签： htmlcssimagesizeheight

解决方案

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

My suggestion is You can use cover CSS.

推荐阅读