CSS 在保持宽高比的同时用图像填充容器？

Question

为了它的值(value)，我正在使用 foundation :

我在一行中有两个 div。我想用保持其纵横比的图像完整地填充整个右侧的 div。

也就是说，我不想扭曲图像，而是想缩放图像直到最短边达到 100%，而较长的边隐藏在容器的边界之外。

我对这是使用 img 标签还是 css 背景图片没有偏好。

这是我目前所拥有的，但是随着窗口大小的调整，图像会失真:

#demo {
    min-height: 100%;
    padding: 0;
    overflow: hidden;
    img {
        min-height: 100%;
        max-width: 100%;
        position: absolute;
        left: 0; bottom: 0;
    }
}

Answer 1

您可以尝试在 css 中将其设置为背景图像，然后使用:background-size:cover;或....背景大小:包含；取决于您的喜好/需要。但此时您可能需要设置 div 大小。例如最小宽度/最小高度。