html - 如何使图像成为完整的浏览器宽度或高度，具体取决于哪个较小

Question

我有一个方形图像，我想在不溢出的情况下尽可能多地填充用户浏览器。问题是在某些设备上宽度大于高度，反之亦然。因此，如果我将宽度设置为 100%，那么在某些设备上这将导致高度溢出。那么，如果宽度小于高度，如何将图像设置为以正方形加载并为 100% 宽度，如果高度小于宽度，如何设置为 100% 高度？ 谢谢

Answer 1

您可以使用 vmin 值:

http://jsfiddle.net/bt2s86vu/

<div></div>    

div {
    width: 100vmin;
    height: 100vmin;
    background: green;
}

请注意，在 IE9 中，您需要在 vmin 上使用 vm:http://caniuse.com/#feat=viewport-units