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中添加两个以上的alt。我尝试了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？

1 个答案: