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

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

问题：如何只将mobile_image.png视口（窗口）的宽度设置为10％？为什么不能向其中添加CSS类或样式标签source media？

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

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

小智.. 6

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

例如

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

还要添加polyfill，这样它就可以跨浏览器运行-https: //github.com/scottjehl/picturefill

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

例如

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

还要添加polyfill，这样它就可以跨浏览器运行-https: //github.com/scottjehl/picturefill