How to add CSS class to the HTML5 picture element - html

Question

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

Answer 1

You can also add classes to the "img src" line of the code:
<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>
The classes are then applied to whichever image is being rendered by the screen size. Definitely helpful for when you're using a framework like Bootstrap or Foundation.

Answer 2

If i'm understanding what you want correctly try targeting the img tag in the picture element then apply your styles to that.
e.g.
#media only screen and (max-width : 767px) {
.my_container img {
width: 10%;
height: auto;
}
}
Also add the polyfill so it will work cross browser - https://github.com/scottjehl/picturefill