Scaling The Image

SCALING THE IMAGE


There is one problem here, and that is that the image may be too wide. In this case, the image is always 136 px wide and the DIV is 30% of the surrounding text. So if you make the window narrower, it may be that the image overflows the DIV (try it!).


If you know the width of all images in the document, you can add a minimum width to the DIV, like this:

DIV.figure {
  min-width: 150px;
}

Another way is to scale the image itself. That's what we have done with the image on the right here. As you can maybe see if you make the window very wide, JPEG images don't scale very well. But if the image is a diagram or a graph in SVG format, scaling in fact works beautifully. Here is the mark-up we used:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez and its
    fort in the evening sun
</div>

Saint Tropez and its fort in the evening sun

And this is the style sheet:

div.figure {
  float: right;
  width: 30%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

The only addition is the last rule: it makes the image as wide as the inside of the DIV (the area inside the border and the padding).