这篇文章发布于 2023年07月20日,星期四,22:36,归类于 CSS相关。 阅读 20337 次, 今日 11 次 12 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10915 鑫空间-鑫生活
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
已知图片尺寸未知,比例不详,但是需要按照1:1的比例显示,一行四个,且宽度自适应,永远弹性响应。
如下MP4视频效果示意(不动点击播放)。
请问,此效果由你来实现,你会如何实现呢?
一、百分比padding
要让一个元素内容按照固定比例显示。
在过去,那个还需要兼容IE浏览器的年代,基本上都是使用百分比padding实现的,因为padding的百分比计算值都是相对于宽度计算的,哪怕是垂直方向。
例如:
div { padding: 100% 100% 0 0; }
就会撑起一个1:1的div元素。
我们就可以利用此特性,让图片1:1高宽比弹性显示。
HTML结构如下,需要三层标签,一层宽度,一层确定高宽,最后图片填充。
<ul class="box"> <li class="list"> <div class="cover"> <img src="0.jpg" /> </div> </li> <li class="list"> <div class="cover"> <img src="1.jpg" /> </div> </li> ... </ul>
CSS代码示意如下,为了兼容IE9,特意使用了传统的浮动布局。
.box { overflow: hidden; } .list { width: calc(25% - 1.5rem / 4); float: left; margin-bottom: .5rem; } .list:not(:nth-child(4n + 1)) { margin-left: .5rem; } .cover { padding: 100% 100% 0 0; position: relative; } .cover img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
由于padding占据了空间,所以图片需要使用绝对定位才能覆盖div元素的支撑空间。
下图为实现后的效果:
眼见为实,您可以狠狠地点击这里:CSS百分比padding与图片等比例布局demo
此布局效果其实2027年2017年的时候就有详细介绍,有兴趣可以访问这里:“CSS百分比padding实现比例固定图片自适应布局”
二、aspect-ratio属性
到了2021年,随着CSS技术的发展,固定比例的图片布局有了新的选择,这个就是CSS aspect-ratio
属性,专门设置元素的高宽比。
不过此属性用在IMG元素上是没有效果的,因为图片元素具有内在尺寸,不受aspect-ratio
属性影响。
因此,使用aspect-ratio
属性实现等比例图像弹性布局需要至少两层标签。
<ul class="box"> <li class="list"> <img src="0.jpg" /> </li> <li class="list"> <img src="1.jpg" /> </li> ... </ul>
相比padding方法,CSS自然也简化了些,这里使用Flex布局示意。
.box { display: flex; gap: .5rem; flex-wrap: wrap; } .list { flex-basis: calc(25% - 1.5rem / 4); aspect-ratio: 1 / 1; } .list img { display: block; width: 100%; height: 100%; object-fit: cover; }
是不是容易理解多了。
实现效果类似下面的截图:
同样的,眼见为实,您可以狠狠地点击这里:CSS aspect-ratio与图片等比例布局demo
关于aspect-ratio
属性更多信息,例如和width/height等属性相比的优先级等,可以参考我之前的这篇文章:“Chrome 88已经支持aspect-ratio属性了,学起来”。
三、cqw单位
到了如今的2023年,又有了更加简单的方法,实现最终的布局需要只需要一层容器标签即可。
<div class="box"> <img src="0.jpg" /> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> </div>
这么给力,那是用什么东西实现的呢?
嘿嘿,容器元素和cqw单位,具体CSS如下所示:
.box { display: flex; gap: .5rem; flex-wrap: wrap; container-type: inline-size; } .box img { width: calc(25cqw - 1.5rem / 4); height: calc(25cqw - 1.5rem / 4); object-fit: cover; }
container-type:inline-size
可以让普通元素变成container容器元素,而cqw是容器宽度单位,1cqw=1%的容器宽度,100cqw就是容器宽度。
而本需求需要一行显示4个图片,因此,每个图片相对于容器的大小就很好计算了。
就是这么简单。
效果一样:
眼见为实,您可以狠狠地点击这里:CSS容器单位cqw与图片等比例布局demo
@container
容器规则还是很强很实用的,具体可以访问“介绍2022最期待且已正式支持的CSS container容器查询”了解更多。
四、结尾的絮叨
从上面的布局进化其实可以窥探到CSS的进步,以及对我们开发带来的意义。
通常而言,CSS的新特性都不是解决0到1的问题的,而是增强为主,让开发变得更简单,让代码变得更加简洁。
当然,有特例,例如:has()
伪类,这个选择器的出现是有些颠覆性的,任意一处元素的变动都可以控制页面中任意其他元素的变化,这个可真是不得了,很多啰哩吧嗦需要JS处理的细节(例如兼容移动端的响应式布局),CSS可以完全cover。
最后,讲下为何这个月更新有些慢。
一方面在写中短篇小说,小说集最后一篇,已经写了万把字了。
另一方面是小朋友暑假,送回老家,然后我每周末要回去下,回去了,那就不可能还有心思工作,钓鱼钓到飞起。
所以,产出接近历史新低。
8月份应该会好一点。
下半年开始,打算写一本关于HTML的书,书名都想好了,什么来着,等下,我手机备忘录里写了,这上了年纪记性不好,幸好随手记了一下。
哦,找到了,叫做“你并不精通HTML”,嗯嗯嗯,这个名字不错。
OK,就说这么多啦,下篇文章我们继续吐槽。
突然想起了问题,css-tricks是不是不更新了,大家有没有发现?
???
本文为原创文章,欢迎分享,勿全文转载,如果实在喜欢,可收藏,永不过期,且会及时更新知识点及修正错误,阅读体验也更好。
本文地址:https://www.zhangxinxu.com/wordpress/?p=10915
(本篇完)
- 介绍2022最期待且已正式支持的CSS container容器查询 (0.479)
- CSS百分比padding实现比例固定图片自适应布局 (0.399)
- Chrome 88已经支持aspect-ratio属性了,学起来 (0.228)
- CSS流体(自适应)布局下宽度分离原则 (0.171)
- 小tip:FireFox下文本框/域百分比padding bug解决 (0.171)
- 又发现一种无需绝对定位就可以元素重叠的CSS技巧 (0.161)
- 好奇心驱使下试验了chatGPT写CSS代码的能力 (0.137)
- CSS @scope他来了 (0.137)
- CSS flex属性深入理解 (0.087)
- CSS值类型文档大全 (0.062)
- css行高line-height的一些深入理解及应用 (RANDOM - 0.024)
https://www.58pic.com/newpic/55640077.html
有兴趣闲情可看这个网站《相似图片》模块是如何布局的
小张早嫁他人妇,你还是把她忘了吧
前端时间也整理了一篇,关于图片、布局自适应等西欧昂管内容,有异曲同工之妙;欢迎大佬指正 https://juejin.cn/post/7204485623461691450
css-tricks 早发现都不动了
是呀。DigitalOcean 把 CSS-Tricks 作者裁了,真可惜。
https://geoffgraham.me/goodbye-css-tricks/
chrome 里给 img 设置 width 之后 (非auto), aspect-ratio 就生效了
学习了~
object-fit: cover; 这个属性在IE9下没作用吧 ,图片会拉伸变形
期待新书,HTML细节很多,正需要一本书来系统学习。
确实css-tricks好久没更新了 不知道为什么?
此布局效果其实2027年的时候就有详细介绍。是2017
有没有可能他故意的
读的这么仔细真的好吗