如何对 srcset 中的不同图像使用不同的 alt？

Question

我有两个图片标签如下

<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="">

现在我很难将以上两个替代品添加到响应式 img 标签中的单个替代品中。我尝试了 alt="image1, image2" 但没有成功。有什么办法吗？

Answer 1

您可以使用图片元素。您不能为您的图片使用不同的 alt 描述，因为 source 元素不采用 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/

如何对 srcset 中的不同图像使用不同的 alt？

How to use different alt for different images in srcset?

html

responsive