First and foremost, you'll want to turn off imgix.js's auto-initialization feature. If you can't define your image's size statically, then you'll have to leverage some relatively-simple Javascript to get the job done. Depending on your layout this might not be possible (and it sounds like maybe it's not), but keep in mind that you can use vw values in here if your image is sized based on the viewport's width. The easiest way to do this is to just define the sizes value statically.
So the problem you're really looking to solve here is "how can I make sure my image's sizes attribute has an accurate size value?"
#Fluid image container download#
If you make sure the value of sizes reflects the intended width of your element, the browser will then select the closest image URL from the srcset attribute (helpfully populated by imgix.js) and download & display that value to your end-user. The attribute of concern in the situation you've described is the sizes attribute, which imgix.js doesn't touch. Put another way: no matter how big your browser is, the URL for a 300px-wide version of your image is still /image.jpg?w=300. The good news here is that this array of URLs is the same no matter what size your image is being rendered at. We populate the srcset with a huge array of reasonable image URLs, and let the browser determine which of them to use. This library is concerned exclusively with populating your tag's srcset attribute, regardless of how the image is sized in your page's layout.
Imgix.js is actually kind of agnostic to your problem here-it's not going to help or hinder your situation at all.
0 kommentar(er)
