如何将CSS类添加到HTML5图片元素 [英] How to add CSS class to the HTML5 picture element

问题描述

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

The code below uses the picture HTML5 element to display a different versions of an image, depending if the user uses a mobile device or a desktop.

问题:如何仅将mobile_image.png视口(窗口)的宽度设置为10％?为什么我不能在source media中添加CSS类或样式标签?

Question: How can I make only mobile_image.png 10% the width of the viewport (window)? Why can't I add a css class or style tag to 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>

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

Using the code below - nothing!

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

推荐答案

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

If i'm understanding what you want correctly try targeting the img tag in the picture element then apply your styles to that.

例如

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

还添加了polyfill，以便跨浏览器运行- https://github.com/scottjehl/picturefill

Also add the polyfill so it will work cross browser - https://github.com/scottjehl/picturefill

这篇关于如何将CSS类添加到HTML5图片元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！