Revised: April 16, 2018
Recall that Chapter 8 said that responsive design would involve media queries, fluid layout (percentages), and flexible images. Regarding flexible images, consider the layout of the six images in the previous example.
n the first layout of the six images, image dimensions are specified in pixels and thus the image size does not change as the layout changes in response to changes in screen resolution or viewport size.
Autumn by the lake is one of the prettiest times of the year
Sometimes a blurry background can look better
If we don't get more rain, the ground might look like this
This is refreshing looking
A rose by any other name -- how does the rest go?
The swan looks so peaceful
Below the images are specified with a style of width:100%, height:auto so the aspect ratio remains unchanged as the available space shrinks, and the image expands to fill the available space as the size of the viewport changes and medai queries get applied. The first image is also specified with a width=225 and height=150 and the second one isn't, so this seems to make no difference in the display size. If the swan image, which would normally appear in the second row, appears in the next row, this causes the previous image to display at a larger size so this would need be to addressed.
Autumn by the lake is one of the prettiest times of the year
Sometimes a blurry background can look better
If we don't get more rain, the ground might look like this
This is refreshing looking
A rose by any other name -- how does the rest go?
The swan looks so peaceful
Below the images are specified with a style of max-width:100%, height:auto so the aspect ratio remains unchanged as the available space shrinks, but the image does not expand beyond its natural size to fill the available space as the size of the viewport changes and medai queries get applied. The first image is also specified with a width=225 and height=150 and the second one isn't, so this seems to make no difference in the display size. If the swan image, which would normally appear in the second row, appears in the next row, this causes the previous image to display at a larger size so this would need be to addressed.
Autumn by the lake is one of the prettiest times of the year
Sometimes a blurry background can look better
If we don't get more rain, the ground might look like this
This is refreshing looking
A rose by any other name -- how does the rest go?
The swan looks so peaceful