我有两个图像标签如下
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
现在我将这两个图像设置为按srcset属性响应如下
<img src="image1.jpg"
srcset="image1.jpg 150w,
image2.jpg 300w"
sizes ="(max-width:991px) 287px,
(max-width:479px) 125px
290px"
alt="">
现在我很难将以上两个 alt 添加到响应式 img 标签中的单个 alt 中。我试过alt="image1, image2"但没有用。有没有办法做到这一点？
您可以使用图片元素。您不能为图片使用不同的 alt 描述，因为源元素没有 alt 属性。然而，它可以带有一个title属性。
请参阅下面来自 w3schools 的示例，他们为图片元素默认img元素提供了一个通用的 alt 标签。
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
这篇概述自定义 polyfill 以完成您想要的内容的文章也可能会有所帮助：https : //iandevlin.com/blog/2014/12/html5/defining-multiple-captions-and-alt-text-for-responsive-images/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句