Barebones CSS for Fluid Images—zachleat.com – DzTechno
A few days back
Primary goal: I want to test width: 100%
versus max-width: 100%
and how those interact with [width][height]
and srcset
attributes.
Now, my usual take was to pop some width: 100%
CSS on that thing and call it a day. width: 100%
CSS forces the image to fill up the width of the container. This overrides any [width]
attribute you have set. This has the downside that the image can outgrow it’s own dimensions and can appear blurry.
Each case below uses a 200×200 image in both a 150px
container (to shrink) and a 300px
container (to grow).