.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等比例缩放了。