<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- picture 方法一 -->
<picture>
<!-- 当屏幕最大为 480px 640px 720px 900px分别显示的图片 -->
<source media="(max-width:480px)" srcset="img/1.jpg">
<source media="(max-width:640px)" srcset="img/2.jpg">
<source media="(max-width:720px)" srcset="img/1.jpg">
<source media="(max-width:900px)" srcset="img/3.jpg">
<!-- 默认情况下显示的图片 -->
<img src="img/1.jpg" alt="responvise images" />
</picture>
<h2>Srcset响应式图片</h2>
<!-- sizes 方法二 -->
<img sizes="(min-width:900px) 900px ,100vw"
srcset="img/1.jpg 480w,img/2.jpg 640w,img/1.jpg 720w,img/2.jpg 900w"
src="img/1.jpg" alt="responsive images" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- picture 方法一 -->
<picture>
<!-- 当屏幕最大为 480px 640px 720px 900px分别显示的图片 -->
<source media="(max-width:480px)" srcset="img/1.jpg">
<source media="(max-width:640px)" srcset="img/2.jpg">
<source media="(max-width:720px)" srcset="img/1.jpg">
<source media="(max-width:900px)" srcset="img/3.jpg">
<!-- 默认情况下显示的图片 -->
<img src="img/1.jpg" alt="responvise images" />
</picture>
<h2>Srcset响应式图片</h2>
<!-- sizes 方法二 -->
<img sizes="(min-width:900px) 900px ,100vw"
srcset="img/1.jpg 480w,img/2.jpg 640w,img/1.jpg 720w,img/2.jpg 900w"
src="img/1.jpg" alt="responsive images" />
</body>
</html>
1029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
