使图像响应浏览器调整宽度和高度

Question

我一直在努力使图像按比例调整大小，留下空白，因此无需滚动就可以在浏览器窗口中完全看到它们。到目前为止我找到的所有解决方案都可以根据浏览器窗口宽度调整图像大小，但如果浏览器窗口的比例与图像不匹配，则会切断图像，用户必须向下滚动看其余的。我知道还有背景尺寸：封面;但我不希望剪裁图像。有什么想法吗？

Answer 1

您可以在CSS中尝试vh和vw单位。几乎所有浏览器都可以使用。

img{width:vw;height:vh;}

缺点是图像可能缩小...所以你可以尝试使用溢出隐藏。

img{width:vh;height:vh;overflow:hidden;position:center;}

Answer 2

如果您使用<img>，则需要object-fit: contain property;如果是background-fit: contain，则需要background-image。

http://codepen.io/robinrendle/pen/BywNVX

object-fit doesn't have perfect browser support，但有a polyfill for it。