CSS高宽不等图片固定比例布局的三重进化

这篇文章发布于 2023年07月20日,星期四,22:36,归类于 CSS相关。 阅读 18025 次, 今日 9 次 12 条评论

 

封面图

已知图片尺寸未知,比例不详,但是需要按照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;
}

是不是容易理解多了。

实现效果类似下面的截图:

aspect-ratio实现效果

同样的,眼见为实,您可以狠狠地点击这里: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个图片,因此,每个图片相对于容器的大小就很好计算了。

就是这么简单。

效果一样:

aspect-ratio实现效果

眼见为实,您可以狠狠地点击这里:CSS容器单位cqw与图片等比例布局demo

@container容器规则还是很强很实用的,具体可以访问“介绍2022最期待且已正式支持的CSS container容器查询”了解更多。

四、结尾的絮叨

从上面的布局进化其实可以窥探到CSS的进步,以及对我们开发带来的意义。

通常而言,CSS的新特性都不是解决0到1的问题的,而是增强为主,让开发变得更简单,让代码变得更加简洁。

当然,有特例,例如:has()伪类,这个选择器的出现是有些颠覆性的,任意一处元素的变动都可以控制页面中任意其他元素的变化,这个可真是不得了,很多啰哩吧嗦需要JS处理的细节(例如兼容移动端的响应式布局),CSS可以完全cover。

最后,讲下为何这个月更新有些慢。

一方面在写中短篇小说,小说集最后一篇,已经写了万把字了。

另一方面是小朋友暑假,送回老家,然后我每周末要回去下,回去了,那就不可能还有心思工作,钓鱼钓到飞起。

所以,产出接近历史新低。

8月份应该会好一点。

下半年开始,打算写一本关于HTML的书,书名都想好了,什么来着,等下,我手机备忘录里写了,这上了年纪记性不好,幸好随手记了一下。

哦,找到了,叫做“你并不精通HTML”,嗯嗯嗯,这个名字不错。

OK,就说这么多啦,下篇文章我们继续吐槽。

突然想起了问题,css-tricks是不是不更新了,大家有没有发现?

😥😥😥

(本篇完)

分享到:


发表评论(目前12 条评论)

  1. 一片碎叶说道:

    https://www.58pic.com/newpic/55640077.html
    有兴趣闲情可看这个网站《相似图片》模块是如何布局的

  2. 刘三说道:

    小张早嫁他人妇,你还是把她忘了吧

  3. 采黎说道:

    前端时间也整理了一篇,关于图片、布局自适应等西欧昂管内容,有异曲同工之妙;欢迎大佬指正 https://juejin.cn/post/7204485623461691450

  4. DeathGhost说道:

    css-tricks 早发现都不动了

  5. Outvi V说道:

    是呀。DigitalOcean 把 CSS-Tricks 作者裁了,真可惜。
    https://geoffgraham.me/goodbye-css-tricks/

  6. CC说道:

    chrome 里给 img 设置 width 之后 (非auto), aspect-ratio 就生效了

  7. meepo说道:

    object-fit: cover; 这个属性在IE9下没作用吧 ,图片会拉伸变形

  8. 咬紧牙关说道:

    期待新书,HTML细节很多,正需要一本书来系统学习。
    确实css-tricks好久没更新了 不知道为什么😣

  9. yukapril说道:

    此布局效果其实2027年的时候就有详细介绍。是2017