15Basic figures

All of the images we’ve looked at so far have had the same width as the div within which they are embedded, and generally, this is OK, it is what we want to happen.

Now look at this image (it is a copy of Figure 10.8) from section 10.3.5, on the website it looks like this:

The image is only as wide as the grey boxes so why doesn’t if fill the central column? It should look like this:

Well, the reason it doesn’t is because I’ve set a maximum width for the image itself.

In this case, I didn’t want the image to fill the full width of the screen, it was just too big and it didn’t fit nicely in the browser window.

This is quite a common occurrence, particularly where full width images are used; it is often the case that you want to display a single image, but if that image is significantly smaller than 748 px (the central column maximum width) and if it is a png or jpeg type image, then expanding it to the full width can make it look pixelated or show distortion effects, or it can just look too big.

So I needed some way to restrict the size of an image and since every image is unique, I decided to do it with a style attribute in the HTML.

Look at the HTML for the above image (the smaller one at the top):

<div class="fig-row">
    <figure class="fig-col fig1-1" id="js--f10-09">
<img style="max-width:400px" src="01-pages/10-03-sections/02-images/fig-10-09.svg" alt="Figure 10.9 - How the side bars behave at narrow browser widths">
<figcaption>Figure 10.9 &emsp; How the side bars behave at narrow browser widths</figcaption>
    </figure>
</div>

This is a straight forward single, full width image. It is loading image fig-10-09.svg from the path:

01-pages/10-03-sections/02-images/

It is using the standard fig1-1 class that wants to make the image 100% of the central column area.

The reason the image is not 100% of the central column area is that I’ve added the following style attribute to the img element:

style="max-width:400px"

This style attribute overrides the .fig1-1 img { width: 100%; } class (it comes after it) and establishes a max-width for the image of 400 pixels (if the columns is narrower than this, the image will shrink to fit the available space, if the column is wider, the image will be restricted to a width of 400 px).

I do this for all the images where I want to restrict the maximum size of the image on the website.