CSS3圖片自適應div

CSS3中的background-size屬性可以讓圖片根據容器的大小自適應。如果該屬性設置為"cover"，則圖片會盡可能地填充容器并且不會失真。如果該屬性設置為"contain"，則圖片會盡可能地縮小以適應容器。

.example {
height: 300px;
width: 500px;
background-image: url("example.jpg");
background-repeat: no-repeat;
background-size: cover;
}

上面的代碼中，.example是一個帶有背景圖的div，它的高度和寬度都有固定的值，在使用background-size:cover屬性設置之后，該div實現了背景圖的自適應。