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

Question

对于它的价值，我正在使用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大小。如min-width / min-hieght。

Answer 2

尝试使用height:auto和width:px or %

＆＃13;

＆＃13;

img {
  height: auto;
  width: 100%;
}

＆＃13;

<img src="http://placeimg.com/640/480/any">

＆＃13;

＆＃13;

＆＃13;