/*将图片作为背景*/ div { background-image: url('img.jpg'); background-repeat: no-repeat; background-size: cover; } /*等比缩放*/ div { height: 0; padding-top: 50%; /*设定的高度是宽度的50%*/ }
在上面的代码中,首先使用CSS将一张图片作为背景,然后使用background-size属性将背景图片的大小设置为cover,这样就能够使图片完美的铺满背景。
接着大家来到等比缩放的部分,这里大家需要将所放置元素的高度设定为0,并且使用padding-top属性来设定该元素的高度。这里大家所设置的高度是宽度的50%,也就是说无论元素的宽度如何变化,其高度始终都是宽度的50%。
这样大家就可以使用CSS图片背景等比缩放技巧在网页设计中实现不同分辨率屏幕下的完美显示。希望本文对你有所帮助,谢谢!