HTML and CSS Reference
In-Depth Information
The percentage width for the
figure
class is based on dividing the width of the
wrapper <div>
(
650px
) by the
width of the image (
400px
), and multiplying by 100:
400 ÷ 650 × 100 = 61.5
Figure
7-18
shows how the image and caption are scaled down proportionately when the browser window
is narrower than
650px
. Removing the dimensions from the
<img>
tag ensures that the image's aspect ratio is
preserved. The image is distorted if you leave in the
height
attribute,
Figure 7-18.
The image and caption are scaled when the browser window is resized
■
iE 6 doesn't support
max-width
. if you need to support iE 6, add a style rule for
.figure img
in an internet
Explorer conditional comment setting
width
to
100%
, as in figcaption_adapt.html.
Note
Lower down the page is a much narrower image. Instead of being
400px
wide and
266px
high, its dimensions
are the other way round. As a result, the
figure
<div>
is too wide when the page is viewed in a normal desktop
browser. To fix this, you need to work out the correct percentage width like this:
266 ÷ 650 × 100 = 40.9
The styles in figcaption_adapt.css contain a
portrait
class to set the
width
for the
figure <div>
surrounding
the image:
.portrait {
width: 40.9%;
}
he
portrait
class is added to the HTML markup for the image and its caption like this:
<div class="figure floatright
portrait
"><img src="images/casino.jpg" alt="Monte Carlo Casino">
<div class="figcaption">Monte Carlo casino</div>
</div>
