responsive-images

I'm trying to use <img srcset /> to load images based on the size they'll appear on the page, rather than based on the size of the viewport. Perhaps examples will help: On any viewport, when the image is styled with width: 100% inside a 200px-wide <div> , img-200.jpg should load. On any viewport, when the image is styled with width: 100% inside a 400px -wide <div> , img-400.jpg should load. ...etc. I've done tons of Googling, but as best as I can tell, srcset is only used for changing images based on viewport size, not image size, if that makes sense. Is that correct? Or is there hope for what

I have a div using flexbox to center its items. Inside this div I have 3 elements, one of them is an image. <div id="flex-container"> <div id="container1"></div> <img src="#" alt=""> <div id="container2"></div> </div> #container1 and #container2 have their own height, and the img should use the remaining height inside #flex-container . This snippet works on Firefox , but doesn't work in Chrome . ( jsfiddle ) #flex-container{ height: 300px; width: 500px; display: flex; display: -webkit-flex; flex-flow: column nowrap; -webkit-flex-flow: column nowrap; justify-content: center; -webkit-justify

Responsive Images in Bootstrap 4, with class .img-fluid are resized disproportionally. They keep it's height even width is shrinking down correctly. That is deforming whole image. Is there any way how to make it as smooth as it was in Bootstrap 3 with class .img-responsive? Thanks <div class="col-sm-6"> <img class="img-fluid" src="/assets/blogs/14853991244821.jpg" alt=""> </div> By the way it is same in Bootstrap 4 documentation ( https://v4-alpha.getbootstrap.com/content/images/ ) where sample svg image keeps height 250 pixels regardless of it's width. The problem was I wrapped image in div

I'm trying to get lazyloading with lazysizes and picturefill to work. The lazyloading itself works if I just use a basic image: <img class=lazyload data-srcset="http://placehold.it/301x301"> If I check the network tab in chrome, I can see that the image was loaded after the red line, so everything is fine: Now I added a <picture> element with my responsive images and try to load that also lazy: <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="http://placehold.it/1370x301 1x, http://placehold.it/2055x450 2x" media="(min-width: 1024px)" /> <source srcset="http:/