等比例缩放盒子

利用padding-bottom特殊性质：当它的值是百分比形式时，百分比的基数是其所在元素的父元素的宽度而不是高度（同 padding-left 和 padding-right 一样）。
解决方案也就非常明显了：

1、将元素的 height 设成 0，使得元素的高度等于 padding-bottom；
2、合理设置 padding-bottom 的值。比如每个元素的 width 是 25%，现在想让元素的高度始终保持为其宽度的两倍，则 padding-bottom 的值应该设置为 50%。

原文：https://www.w3ctech.com/topic/1483

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 6,831评论 0赞 11
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,652评论 0赞 0
  • 盒子模型
    什么是盒子？ CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里。 我们只需要将相应的盒子摆放到网页中相...
    咻咻咻滴赵大妞阅读 4,423评论 0赞 0
  • CSS基础
    CSS 是什么 css(Cascading Style Sheets)，层叠样式表，选择器{属性:值；属性：值}h...
    崔敏嫣阅读 5,345评论 0赞 5
  • CSS1
    第一章 F12: element.style 内联样式（可以直接在上面写代码进行简单调试） user agent...
    fastwe阅读 5,450评论 0赞 0