hugo-theme-w3css-basic
hugo-theme-w3css-basic copied to clipboard
Add support for srcset
<img src="..." srcset="..."
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. The browser then does all the work figuring out which one will be best.
https://stackoverflow.com/questions/30460681/changing-image-src-depending-on-screen-size
<picture>
<source media="(min-width: 900px)" srcset="BigImage.png">
<source media="(min-width: 480px)" srcset="MediumImage.png">
<img src="OtherImage.png" alt="IfItDoesntMatchAnyMedia">
</picture>
https://www.html5rocks.com/en/tutorials/responsive/picture-element/