CSS:保持 Div 元素的纵横比

Question

<分区>

Answer 1

如果您希望图像保留包含的 div 的宽度和高度，请使用:

background-size: 100% 100%;

图像会变形，但您可能不介意。

如果您希望背景是图像的任何部分足以覆盖 整个 div 随着视口(viewport)的变化，使用:

background-size: cover;

如果要确保整个图像以适当的纵横比出现在背景中，请使用:

background-size: contain;

在这种情况下，图像可能会平铺以覆盖 div。

HTML

<div id="thediv"></div>

CSS

html, body {
    height: 100%;
}

#thediv {
    height: 100%;
    background-image: url(http://i.imgur.com/MabCTXH.jpg);
    background-size: 100% 100%;
}