html - 如何给HTML5图片元素添加CSS类

Question

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

问题:如何让 mobile_image.png 只占视口(viewport)(窗口)宽度的 10%？为什么我不能将 css 类或样式标签添加到 source media？

<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;
}
}

Answer 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 这样的框架时绝对有帮助。