HTML and CSS Reference
In-Depth Information
Scroll down and see how the
aside
section is formatted, which should look like Figure
6-14
.
Figure 6-14.
The layout of the aside section
Using Flexible Images
If you continue to shrink the web page, the phone booth window will eventually be clipped. To prevent that, set
the
max-width
property to 100%. This will cause the images to be re-sized to fit the width of the container. This is
not done inside a media query and this format will be applied at all resolutions. Enter the following code to the
end of the
style
element:
#phone
{
max-width: 100%;
height: auto;
}
Setting the height to auto will change the height to maintain the existing aspect ratio. Refresh the web page
and continue shrinking the window. Notice that the image will start shrinking as well. You can still rotate it as
shown in Figure
6-15
.
