现下流行的网页基本都是基于响应式布局设计(responsive web design)的,本文讲解在响应式布局的网页中如何正确的插入图片使其能自适应屏幕大小,同时还能获得最佳的加载性能与显示效果,这种方式叫做”响应式图片”(responsive image)。
响应式图片的解决方案有很多,HTML、JavaScript 和 CSS 都可以实现,本文介绍 HTML 与 CSS 两种方式,因为实现最简单而且浏览器原生支持。最简单的响应式图片实现方法为
img {
width: 100%;
height: auto;
}
但这种方式可能会造成图片显示的尺寸比它的原始图片大。假设它的父容器 width 为 300px,而图片原始宽度只有 200px 的时候,就会拉伸,造成图像模糊。
如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小:
img {
max-width: 100%;
height: auto;
}
如果本文只介绍这样的方法,未免太肤浅。这种实现的方式虽简便,但不能达到最佳的加载性能和用户体验,原因有如下几点:
针对以上问题,HTML 提供了一套完整解决方法,那就是的 srcset 属性,或者 HTML5 的
<img srcset="demo-320w.jpg,
demo-480w.jpg 1.5x,
demo-640w.jpg 2x"
src="demo-640w.jpg">
上面的代码中,srcset 属性给出了三个图片 URL,适应三种不同的像素密度。图片 URL 后面的像素密度描述符,格式是像素密度倍数 + 字母 x。1x 表示单倍像素密度,可以省略。浏览器根据当前设备的像素密度,选择需要加载的图片。如果 srcset 属性都不满足条件,那么就加载 src 属性指定的默认图片。
<picture>
<source media="(min-width: 768px)" srcset="https://cdn.22vd.com/demo-768x90.jpg">
<source media="(min-width: 468px)" srcset="https://cdn.22vd.com/demo-468x60.jpg">
<img src="demo-250x250.jpg">
</picture>
上面这段代码用的是 HTML5 的 <picture>元素 ,如果设备屏幕宽度达到 768px 或以上,则显示 demo-768×90.jpg;如果屏幕宽度达到 468 或以上,则显示 demo-468×60.jpg;如果以上两个条件都不匹配,则显示 demo-250×250.jpg。此方法最适合图片展示广告。
下面再给一个示例,同时考虑屏幕尺寸和像素密度的适配。
<picture>
<source srcset="https://cdn.22vd.com/demo@desktop.png,https://cdn.22vd.com/demo@desktop-2x.png 2x"
media="(min-width: 990px)">
<source srcset="https://cdn.22vd.com/demo@tablet.png,https://cdn.22vd.com/demo@tablet-2x.png 2x"
media="(min-width: 768px)">
<img srcset="https://cdn.22vd.com/demo@mobile.png,https://cdn.22vd.com/demo@mobile-2x.png 2x"
alt="演示图片">
</picture>
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!