Barebones CSS for Fluid Images

A couple of days back CarolSaysThings's Avatar CarolSaysThings postured what I anticipated to be a basic concern till I began to question what I currently understood. Carol had some image markup (produced by Eleventy Image)and was asking the very best method to make the image fluid( match the width of its container ). I understood I comprehended this well sufficient to utilize it in my own work however I began to recognize that maybe I didn’t understand this subject all right to teach it so I dove in a little deeper.Primary objective: I wish to check width: 100%versus max-width: 100% and how those engage with [width] [height] and srcset attributes.Now, my typical take was to pop some width: 100 %CSS on that thing and stop. width: 100 %CSS requires the image to fill the width of the container. This bypasses any [width] quality you have actually set. This has the drawback that the image can outgrow it's own measurements and can appear blurry.Each case listed below utilizes a 200 × 200 image in both a 150px container(to diminish )and a 300px container(to grow).width: 100 %Without [width] [height]The sample Nebula Image from Unsplash on the Eleventy Image docs

.

for the [width] and [height] qualities? I kinda wish to utilize the biggest one-- any apparent drawbacks to that?Copy and Paste #Writing this article has actually swayed me to part from my width: 100%methods! I believe this is what my boilerplate will be moving on( it renders like the above example utilizing width: vehicle): img max-width: 100%;

img [width] code>; img [width] [height]. img [src $=". svg"]

Leave a Reply

Your email address will not be published. Required fields are marked *