摘要：不规整元素的宽高等比例在不同屏幕情况中不同宽高的元素都以相同等比例等宽和等高方式展示。规定基于父元素的宽度的百分比的内边距。
不规整元素的宽高等比例
在不同屏幕情况中不同宽高的元素都以相同等比例、等宽和等高方式展示。
需求设计师希望页面的图片区域，以宽高为2:1比例且所有图片的等宽和等高的方式展示。小加同学觉得设计师这需求太容易，分分钟搞定，拿到图片后便开始刷刷的撸代码。原型设计稿大致如下:
每个图片区域宽度为父元素宽度的25%，图片的宽度设置100%，其高度根据宽度等比例自动缩放（小加以为图片的宽高应该是同比例的），这样就可以适应屏幕达到要求咯～
HTMLCSS初版
.section {
margin-bottom: 100px;
}
.section__image-wrap {
display: inline-block;
float: left;
padding: 10px;
}
.section__image {
width: 100%;
}
效果图
吐槽
OMG，这这这...是什么情况啊～ 一行四个，怎么第二行就一个，前面三个位置都是空的，这不可能啊！等等，我需要静静～ 貌似图片不是同比例的宽高的，**这让我怎么搞，手动设置图片高度为50%？实时计算高度然后动态设置图片高度？
分割线来咯～ 你能够尝试着解决这个问题吗？
使用padding百分比的方式来实现不规整元素宽高等比例。padding-left/right设置百分比时，是参考父元素的宽度；想当然的padding-top/bottom设置百分比时，是参考父元素的高度，Oh no no no... 它也是参考父元素的宽度哦。
CSS .section {
margin-bottom: 100px;
}
.section__image-wrap {
display: inline-block;
float: left;
padding: 10px;
}
.section__image {
width: 100%;
}
.section-revision--padding .section__image-wrap {
position: relative;
padding: 12.5% 0 0 25%;
}
.section-revision--padding .section__image {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 10px;
}
效果图
效果对比图
关键知识点
| padding value | description |
|---|---|
| auto | 浏览器计算内边距。 |
| length | 规定以具体单位计的内边距值，比如像素、厘米等。默认值是0px。 |
| % | 规定基于父元素的宽度的百分比的内边距。 |
| inherit | 规定应该从父元素继承内边距。 |
资源 在线测试 源代码w3school
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115256.html
摘要：不规整元素的宽高等比例在不同屏幕情况中不同宽高的元素都以相同等比例等宽和等高方式展示。规定基于父元素的宽度的百分比的内边距。 不规整元素的宽高等比例 在不同屏幕情况中不同宽高的元素都以相同等比例、等宽和等高方式展示。 需求 设计师希望页面的图片区域，以宽高为2:1比例且所有图片的等宽和等高的方式展示。小加同学觉得设计师这需求太容易，分分钟搞定，拿到图片后便开始刷刷的撸代码。原型设计稿大...
摘要：于是我们就需要实现一个宽度自适应，高度为宽度一半的容器。一思考如何实现这个问题类似于我们在移动端页面，上面有一张宽度的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。我们就可以利用这个特性，实现移动端的宽高等比自适应容器。 在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。 于是我们就需要实现一个宽度自适应，高度为宽...
阅读 2401·2021-11-24 09:39
阅读 3222·2021-10-09 09:53
阅读 1129·2021-09-22 16:06
阅读 4440·2021-09-02 10:18
阅读 798·2021-08-23 09:42
阅读 1759·2021-08-17 10:11
阅读 2685·2019-08-30 13:02
阅读 2120·2019-08-30 12:49
