Question

我正在尝试构建一个包含3列的标题。每列一张图像。我需要调整图像的大小以适合页眉的高度。

我的图片的分辨率为100px x 100px。

因此，如果高度高于100像素，则调整大小的效果很好：

但是高度小于100像素时，图像无法调整大小。

这是我的HTML

    if resp.ok :
        print ('OK!')
    else:
        print ('Boo!')

这是我正在使用的CSS。

<body>
    <div id="header">
        <div class="headergridelement"><img alt="" src="file:///C:/.../info100x100.jpg"></div>
        <div class="headergridelement"><img alt="" src="file:///C:/.../info100x100.jpg"></div>
        <div class="headergridelement"><img alt="" src="file:///C:/.../info100x100.jpg"></div>
    </div>
</body>

我缺少什么财产？

Answer 1

您可以添加object-fit: cover，然后指定所需的max-height，在这种情况下为100％。
因此，它可以防止图像溢出#header元素。

#header img {
    height: 100%;
    object-fit: cover;
    max-height: 100%;
}

您可以在MDN文档中查看有关object-fit here的信息。

更新：解决方案2

上面的代码在Chrome浏览器中可以正常工作，但在Firefox中不能正常工作。
Firefox的解决方案是在父div中使用position: relative，在图像中使用position: absolute。另外，设置height: 100%以及位置和边距以使图像居中。

#header .headergridelement {
   background-color: rgba(255, 255, 255, 1);
   position: relative;
}

#header img {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

在网格中调整图像大小以使div适合较小的尺寸

1 个答案:

更新：解决方案2