中软大前端0329-响应式图片

发表于 | 分类于

背景图片——响应调整大小

  • background-size:contain
    背景图片按比例自适应内容区域，图片保持原比例不变。有时不足以覆盖整个背景区域

  • background-size:100% 100%
    背景图片延展覆盖整个区域

  • background-size:cover
    背景图片扩展至足够覆盖背景区域，同时保持图片比例，因此有些部分无法显示

不同设备显示不同图片

  • 使用媒体查询，监控更换图片（断点）

HTML5元素

第一个设置的资源为首选项，用<picture>元素来提供备用选项

1
2
3
4
<picture>
	<source src="img_1.jpg" type="" media="(max-width:400px)">
	<source src="img_2.jpg" type="">
</picture>

srcset属性

解决分辨率切换问题时，需要使用srcset让浏览器可以选择。浏览器可以根据网络情况或用户行为等元素做决定

1
<img src="cat.jpg" srcset="cat1.jpg,cat-2X.jpg 2X"/>