HTML source元素media属性不同图片实例页面

回到相关文章 »

效果：

设备宽度大于640，显示长方形图片，否则显示正方形图片

//zxx: 若桌面浏览器打开，改变宽度试试，若手机打开，横屏试试

代码：

CSS代码：
img {
    max-height: 192px;
}
HTML代码：
<picture>
  <source srcset="rect.png" media="(min-width: 640px)">
  <img src="square.png">
</picture>