只用 CSS 实现响应式 Full-Width img 2 种方法

用户头像
寇云
关注
发布于: 2020 年 05 月 28 日
只用CSS实现响应式Full-Width img 2种方法

原文地址: 《CSS-Only Full-Width Responsive Images 2 Ways

我从事前端开发13年有余,一直致力于研究现代CSS解决方案,这是我该系列文章的第3篇

以前在jquery流行的时候用于响应式背景图片的最受欢迎的工具是Backstretch jQuery插件。

background-size属性得到广泛支持之前(即IE<9总市场份额下降了)我在大约30个项目中使用了此插件。

background-size: cover;


根据caniuse.com的说法,虽然这个属性和价值已经支持了9年多了! 但与使用Backstretch或其他方案交织在一起的网站可能还没有更新。

另一种方法是利用标准的img标签,并使用了神奇的属性:

object-fit: cover;


下面我们就来看看每一种方案的使用方法,学习一下什么时候选择哪一个合适。

background-size: cover 方案

我十年的工作背景是为企业网站创建高度定制的WordPress主题和插件,所以用模板化的卡片为例,下面是你可能使用的background-size: cover解决方案来设置。

首先是HTML,将图片作为背景插入样式属性中。鼓励用一个ria-label来代替普通img标签上的alt属性。

<article class="card">
<div class="card__img" aria-label="Preview of Whizzbang Widget" style="background-image: url(https://placeimg.com/320/240/tech)"></div>
<div class="card__content">
<h3>Whizzbang Widget SuperDeluxe</h3>
<p>
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
biscuit marzipan. Macaroon pie sesame snaps jelly-o.
</p>
<a href="#" class="button">Add to Cart</a>
</div>
</article>


对应CSS如下, 其中padding-bottom是一个特殊的技巧,使div背景图片保持16:9的比例。

.card__img {
background-size: cover;
background-position: center;
// 16:9 ratio
padding-bottom: 62.5%;
}


codepen示例:

https://codepen.io/5t3ph/pen/VwvvVeo

object-fit: cover 方案

根据caniuse data的数据,没有polyfill的情况下,不支持IE浏览器。

这个样式是直接放在img标签上的,所以我们把我们的HTML更新为如下,把 aria-label 换成 alt

<article class="card">
<img class="card__img" alt="Preview of Whizzbang Widget" src="https://placeimg.com/320/240/tech"/>
<div class="card__content">
<h3>Whizzbang Widget SuperDeluxe</h3>
<p>
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream
biscuit marzipan. Macaroon pie sesame snaps jelly-o.
</p>
<a href="#" class="button">Add to Cart</a>
</div>
</article>


然后我们更新css样式使用height属性来约束图像,以便任何尺寸的图像都符合约束比例。如果图像的固有尺寸大于约束的图像尺寸,那么 object-fit属性就会接管,默认情况下,img会在card+ 高度定义所创建的范围内居中。

.card__img {
object-fit: cover;
height: 30vh;
}


codepen:

https://codepen.io/5t3ph/pen/VwvvVqa

什么时候选择哪一个合适

如果你必须支持老版本的IE,那么在没有polyfill的情况下,你只能采用background-size这种解决方案。

这两种方案都可以根据你控制宽高比来实现Full-Width响应式图片。

如果你选择background-size这种方式:

  • 应用于包含额外内容的容器(例如网站header背景)

  • 应用于伪元素样式中,img标签不可用时

  • 更加优雅地应用统一的图像尺寸

  • 纯粹是装饰性的图像,不需要固有的img语义。

选择 object-fit方式:

  • 为了保持图像提供的所有语义,使用标准的img对你的上下文来说是最好的。



用户头像

寇云

关注

前端工程师,远程工作者 2012.06.12 加入

还未添加个人简介

评论

发布
暂无评论
只用CSS实现响应式Full-Width img 2种方法