HTML图片或srcset用于响应图像

概述参见英文答案 > Why do we need the picture element when we have srcset attribute?                                     使图像响应一直是许多响应式网页设计的麻烦的一个方面。我已经经历了一些关于相同的文章，并以“srcset”和“图片”作为解决方案。 SRCSET示例 <img src="flowe 参见英文答案 > Why do we need the picture element when we have srcset attribute?
使图像响应一直是许多响应式网页设计的麻烦的一个方面。我已经经历了一些关于相同的文章，并以“srcset”和“图片”作为解决方案。

SRCSET示例

<img src="flower_500px.jpg"     srcset="flower_750px.jpg 1.5x,flower_1000px.jpg 2x"     wIDth="500px" alt="flower">

图片示例

<picture>      <source media="(min-wIDth: 45em)" srcset="flower_1000px.jpg">      <source media="(min-wIDth: 32em)" srcset="flower_750px.jpg">      <img src="flower_500px.jpg" alt="flower">  </picture>

我试图决定这两种方法中的哪一种选择使图像响应。在这个选择中我应该考虑什么特点？

解决方法 图片和srcset都不兼容所有浏览器，但它们都优雅地降级。如果浏览器不了解< picture>元素，它会优雅地回到< img>元素里面。如果浏览器不明白< img srcset ...>它将回到使用图像的src属性。

< picture>元素(和< source>子元素)是您想要在图像的不同大小/宽高比上进行艺术方向时带来的重型q。 img srcset属性更轻便，如果您想为不同的分辨率显示设计，您需要的是所有这些。

因为它们都具有向后兼容性的措施，所以我不用担心你使用哪一个 – 两者都会在旧版浏览器中正常退回。如果您只是设计像素密度，我建议使用srcset，因为它更轻巧。

总结

以上是内存溢出为你收集整理的HTML图片或srcset用于响应图像全部内容，希望文章能够帮你解决HTML图片或srcset用于响应图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。