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.
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>
Search WWH ::

Custom Search