CSS 的奇技工巧：4行属性写出等比例盒子

2021-03-13 17:37

阅读：487

一个项目中需要用到一个广告位的轮播图效果，而这个轮播图位置需要根据不同设备的尺寸进行缩放从而保持相同的比例。

最开始使劲琢磨发现用 width + height 属性是实现不了这种效果的，非得用 JS 才能达到这种效果吗？终于发现有前人早已解决过这个问题，这里权当自己吸收学习，因此记录下来。

HTML

CSS

.box
{
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

img
{
    width: 100%;
}

演示效果

技术图片

仔细想一想这不过是 CSS 中最基础的内容，没有什么新颖华丽的内容。但是其中值得思考的东西颇多，不妨读者也想一想：

注意

padding 属性的继承关系

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：CSS 的奇技工巧：4行属性写出等比例盒子
文章链接：http://soscw.com/index.php/essay/64211.html

亲，登录后才可以留言！