How to add CSS class to the HTML5 picture element

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.