如何将 CSS 类添加到 HTML5 图片元素答案

【问题标题】：How to add CSS class to the HTML5 picture element如何将 CSS 类添加到 HTML5 图片元素
【发布时间】：2015-03-16 11:51:42
【问题描述】：

下面的代码使用picture HTML5 元素来显示不同版本的图像，具体取决于用户使用的是移动设备还是台式机。

问题：如何使 mobile_image.png 仅占视口（窗口）宽度的 10%？为什么我不能给source media添加css类或样式标签？

<div class="my_container">
<a href="#back_to_top">
<picture>
<source media="(max-width:767px)" srcset="mobile_image.png">
<source media="(min-width:768px)" srcset="desktop_image.png">
<img src="fallback_image.png" alt="Back to Top">
</picture>
</a>
</div>

使用下面的代码 - 什么都没有！

@media only screen and (max-width : 767px) {
.my_container {
width:10%;
height:auto;
}
}

【问题讨论】：

picture 元素和相应的源属性是相当新的，那么您使用哪个版本的浏览器进行测试？
Chrome 39. 就我所见，此时的图片元素不接受css样式？我可以为其添加边框，但不能设置宽度...
我这里没有 Chrome 39，所以我必须更新，但在 Firefox 33 中它可以按预期工作，只是您需要在大小更改后刷新窗口才能看到新的图片。它不会在断点处自动更新图像。这可能是 Chrome 中的问题吗？
或者，问题是你期望图像的大小随着picture的大小而缩放吗？
感谢您的测试。 Firefox 还不支持，它只是使用提供的元素作为后备元素。我想我应该开始寻找其他解决方案，图片现在似乎太多了实验......

标签： html css

【解决方案1】：

您还可以在代码的“img src”行中添加类：

<picture>
   <source media="(min-width:768px)" srcset="tablet_image.png">
   <source media="(min-width:992px)" srcset="desktop_image.png">
   <img src="fallback-mobile_image.png" alt="whatever" class="img-responsive center-block etc">
</picture>

然后，这些类将应用于按屏幕尺寸呈现的任何图像。当您使用像 Bootstrap 或 Foundation 这样的框架时，绝对有帮助。

【讨论】：

【解决方案2】：

如果我正确理解了您想要的内容，请尝试在图片元素中定位 img 标记，然后将您的样式应用于该元素。

例如

@media only screen and (max-width : 767px) {
  .my_container img {
    width: 10%;
    height: auto;
  }
}

同时添加 polyfill，使其可以跨浏览器工作 - https://github.com/scottjehl/picturefill

【讨论】：