css 不规整元素的宽高等比例
不规整元素的宽高等比例
在不同屏幕情况中不同宽高的元素都以相同等比例、等宽和等高方式展示。
需求
设计师希望页面的图片区域,以宽高为2:1比例且所有图片的等宽和等高的方式展示。小加同学觉得设计师这需求太容易,分分钟搞定,拿到图片后便开始刷刷的撸代码。原型设计稿大致如下:
初版
思路
每个图片区域宽度为父元素宽度的25%,图片的宽度设置100%,其高度根据宽度等比例自动缩放(小加以为图片的宽高应该是同比例的),这样就可以适应屏幕达到要求咯~
HTML
初版
CSS
.section {
margin-bottom: 100px;
}
.sectionimage-wrap {
display: inline-block;
float: left;
padding: 10px;
}
.sectionimage {
width: 100%;
}
效果图
吐槽
OMG,这这这...是什么情况啊~ 一行四个,怎么第二行就一个,前面三个位置都是空的,这不可能啊!等等,我需要静静~ 貌似图片不是同比例的宽高的, 这让我怎么搞,手动设置图片高度为50%?实时计算高度然后动态设置图片高度?
分割线来咯~ 你能够尝试着解决这个问题吗?
改版
思路
使用padding百分比的方式来实现不规整元素宽高等比例。padding-left/right设置百分比时,是参考父元素的宽度;想当然的padding-top/bottom设置百分比时,是参考父元素的高度,Oh no no no... 它也是参考父元素的宽度哦。
CSS
.section {
margin-bottom: 100px;
}
.sectionimage-wrap {
display: inline-block;
float: left;
padding: 10px;
}
.sectionimage {
width: 100%;
}
.section-revision--padding .sectionimage-wrap {
position: relative;
padding: 12.5% 0 0 25%;
}
.section-revision--padding .sectionimage {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 10px;
}
效果图
效果对比图
关键知识点
padding value
description
auto
浏览器计算内边距。
length
规定以具体单位计的内边距值,比如像素、厘米等。默认值是0px。
%
规定基于父元素的宽度的百分比的内边距。
inherit
规定应该从父元素继承内边距。
w3school
资源
在线测试
源代码
关键字:css, bootstrap, padding, html
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!