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