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

Question

我有一个方形图像，我希望尽可能多地填充用户浏览器而不会溢出。问题是在某些设备上宽度大于高度，反之亦然。因此，如果我将宽度设置为100％，那么在某些设备上，这将导致高度溢出。那么，如果宽度小于高度和100％高度，如果高度小于宽度，我怎样才能将图像设置为正方形并且宽度为100％？ 感谢

Answer 1

您可以使用vmin值：

BackgroundManager

<div></div>    

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

请注意，在IE9中，您需要在vmin上使用vm：http://jsfiddle.net/bt2s86vu/

Answer 2

您可以使用此方法使图像占据整个宽度和高度 -

 img{
      min-width: 100vw;
      min-height: 100vh;
 }