CSS开发 之 响应式宽高等比缩放

目录

• 需求

• 思路

• 自适应宽高等比缩放的块元素

• 添加占满该元素的图片子元素

• 挑战

• 参考

需求

最近 需要实现这样的效果

https://www.zhgcloud.com/source

其中 图片是响应式宽高等比缩放的

• 图片宽度和屏幕宽度成比例

• 图片高度和图片宽度成比例

思路

虽然 设置图片宽度和屏幕宽度成比例是有效的

width: w%; /* 有效 */

但是 设置图片高度和图片宽度成比例却是无效的

height: h%; /* 无效 */

因为

宽高百分比是相对于其父元素的

虽然 父元素宽度是已知的 但是

父元素高度默认是根据内容自适应的

所以 高度百分比是无效的

最终 我们实现的思路如下

• 自适应宽高等比缩放的块元素

• 添加占满该元素的图片子元素

自适应宽高等比缩放的块元素

这里 我们用到了Box Model

内边距的百分比是相对于盒子的宽度

div {
  width: 100%;
  padding-top: 40%;
  background-color: red;
}

此时 自适应且宽高比是10:4 效果详见JSFiddle aspect-radio-01

添加占满该元素的图片子元素

这里 我们利用了position

  ![](http://upload-images.jianshu.io/upload_images/2180450-3d151d1d201650e1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

div {
  width: 100%;
  padding-top: 40%;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

此时 图片宽高比完全随父元素等比缩放 效果详见JSFiddle aspect-radio-02

挑战

最后 我们扩展该问题 实现这样的效果

aspect-radio-01.png

.item {
    float: left;
    width: 46%;
    height: 0;
    margin: 10px 2%;
    padding-bottom: 30%;
    background-color: #dbe0e4;
}

效果详见JSFiddle aspect-radio-03

参考

• Maintain the aspect ratio of a div with CSS

• 纯 CSS 实现高度与宽度成比例的效果

• [已解决] 图片 CSS：怎样才能 “响应式 + 固定宽高比例”？

更多文章, 请支持我的个人博客