Question

我正在学习自适应图像，我想在里面设计我的图片标签和图像。我试过使用.test1和.test2选择器，但它们都不起作用。那么有什么方法可以设计它吗？感谢。

UPD。例如，我想在图像上创建一个红色边框：https://jsfiddle.net/842L3f1x/

<picture class="test1">
  <source class="test2" srcset="img/photo-city@1x.jpg" media="(max-width: 700px)">
  <source srcset="img/photo-city@2x.jpg">
  <img src="img/photo-city@2x.jpg" alt="Photo city">
</picture>

Answer 1

你可以这样做：

<picture >
  <source srcset="https://placehold.it/350x150" media="(max-width: 700px)">
  <source srcset="https://placehold.it/750x450">
  <img  class="test1" src="https://placehold.it/750x450" alt="Photo city">
</picture>

它可以提供您需要的确切输出; img周围的红色边框，你不需要第二个CSS类。正如评论所说，使用“实验”功能要非常小心;您可能不支持某些浏览器的用户，以及该功能将来可能会发生变化并破坏您网站的功能。

样式图片元素

1 个答案: