保留纵横比的全屏 div 中的图像

Question

我尝试将图像放在 div 中以全屏显示。我尝试了很多方法，但是如果图像的高度大于宽度，我会遇到很多问题，在这些情况下，图像应该居中显示，剩余空间使用容器 div 的背景颜色，我不想裁剪图片

Answer 1

使用background-size:contain。这将防止裁剪并保持比例，同时仍然可以尽可能多地填充空间。

要居中使用background-position:center;

div {
  background-image:url('http://static.tumblr.com/purt4nm/BCJmqjvcj/1367698942181.jpg');
}

http://jsbin.com/enaxif/1/edit

Answer 2

也许是这样的？

<img src="path" height="100%" />