CSS3背景等比例

.background {
background-image: url(圖片路徑);
background-size: cover;
background-repeat: no-repeat;
}
.background {
position: relative;
overflow: hidden;
}
.background:before {
display: block;
content: '';
padding-top: 66.7%;
}
.background img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

CSS3中，我們可以通過background-size屬性來控制背景圖片的大小，其中cover值可以使背景圖片等比例縮放，填充滿整個背景。但是如果想要一個div內的img標簽也能與div等比例縮放，怎么實現呢？

可以通過:before偽元素來解決，設置padding-top為div寬度的百分比(高度/寬度)，就可以使:before與div寬高比例一致。同時在:before上面再添加一個img標簽，設置其position為absolute，top:0;left:0;width:100%;height:100%即可，這樣就可以實現一個div內的img標簽與div等比例縮放了。