Karle Karle - 4 months ago 17
HTML Question

Resize an image in HTML without JavaScript

I have used media queries to resize a picture on different breakpoints,
i don't want to use JS for the resize and wanted to have everything in html since i want to use craft as a CMS on the website and want to have dynamicly generated code , i have been reading tons of sites and blogs and they all start to confuse me more and more ..is it really a clever solution to use the picture tag like this :

<picture>
<source srcset="img/news.jpg" media="(min-width: 1429px)">
<source srcset="img/news_m.jpg" media="(min-width: 960px)">
<source srcset="img/news.jpg" media="(min-width: 460px)">
<img srcset="img/news_m.jpg"/>
</picture>


i couldn't figure out the the img way ( setsrc with w etc) it never really worked.

Answer

I am using picturefill as a fallback ..it works fine ..if anyone was wondering :-) thanks guys

https://scottjehl.github.io/picturefill/

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="img/news.jpg" media="(min-width: 1429px)">
  <source srcset="img/news_m.jpg" media="(min-width: 960px)">
  <source srcset="img/news.jpg" media="(min-width: 460px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="img/news_m.jpg" alt="My default image">
</picture>
Comments