how to avoid resizing of lazyloading gifs with repsonsive images?

[Lichtathlet]

I’m using a grid system in which images are stretched to width: 100%, max-width: 100% to always fill up the colums. The tricky part is, I also use lazy loading and now the loading.gif is stretched to the max as well resulting in a huge, pixelated gif. Is there any way to avoid this?

example page: https://de.personello.com?frmIs_UseMobileContainer=1

[Beverleyh]

Null the width and/or max-width (reset to CSS values to defaults). OR explicitly define more desirable sizes, maybe changing them to suit different screens inside media queries.

You can use the develop toolbar to help identify the element-in-question. That’s F12 in most browsers, OR right-click the element in your browser and inspect it that way. The developer toolbar will help you identify the selectors to use in your CSS, and you can test your style edits live in the browser before applying them your live site.

[Author]

Posts