全屏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%" />