Making images scale with a fluid layout can be achieved simply for modern browsers (including IE 7+). It's as simple as declaring the following in the CSS:
img {
max-width: 100%;
}This makes any images automatically scale to up to 100 percent of their containing element. Furthermore, the same attribute and property can be applied to other media. For example:
img,object,video,embed {
max-width: 100%;
}And they will scale too, apart from a few notable exceptions such as <iframe> videos from YouTube but we'll wrestle those into submission in Chapter 4, HTML5 for Responsive Designs. For now though, we'll concentrate on images as the principles are the same, regardless of the media.
There are some important considerations in using this approach. Firstly, it requires some forward planning—the images inserted must be large enough to scale to larger viewport sizes. This leads to a further, perhaps more important consideration. No matter the viewport size or device viewing the site, they will still have to download the large images, even though on certain devices the viewport may only need to see an image 25 percent of its actual size. This is an important bandwidth consideration in some instances so we'll revisit this second problem shortly. For now, let's just get our images scaling.
Consider our sidebar with the posters of two cracking movies and two absolute stinkers (this isn't up for discussion). The markup is currently as follows:
<!-- the sidebar -->
<div id="sidebar">
<div class="sideBlock unSung">
<h4>Unsung heroes...</h4>
<a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" width="99" height="135" /></a>
<a href="#"><img src="img/wyattEarp.jpg" alt="Wyatt Earp" width="99" height="135" /></a>
</div>
<div class="sideBlock overHyped">
<h4>Overhyped nonsense...</h4>
<a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" width="99" height="135" /></a>
<a href="#"><img src="img/kingKong.jpg" alt="King Kong" width="99" height="135" /></a>
</div>
</div>Although I've added the max-width: 100% declaration to the img element in my CSS, nothing has changed and the images aren't scaling as I expand the viewport:
The reason here is that I've explicitly stated both the width and height of my images in the markup:
<img src="img/wyattEarp.jpg" alt="Wyatt Earp" width="99" height="135" />
Another schoolboy error! So I'll amend the markup associated with the images, removing the height and width attributes:
<img src="img/wyattEarp.jpg" alt="Wyatt Earp" />
Let's see what that does for us by refreshing the browser window:
Well, that's certainly working! But that's introduced a further problem. Because the images are scaling to fill up to 100 percent of the width of their containing element, they're each filling the sidebar. As ever, there are various ways to fix this…
I could add an additional class to each image as done in the following code snippet:
<img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" />
And then set a specific rule for the width. However, instead I'm going to leave the markup as is and use CSS specificity to overrule the existing max-width rule with a further, more specific rule for my sidebar images:
img {
max-width: 100%;
}
.sideBlock img {
max-width: 45%;
} The following screenshot shows how things look in the browser now:
Using CSS specificity in this way allows us to add additional control to the width of any other images or media, too. Also, in Chapter 5, CSS3: Selectors, Typography, and Color Modes we'll look at how CSS3's powerful new selectors let us target almost any element without the need for extra markup or introducing JavaScript frameworks such as jQuery to do our dirty work.
For the sidebar images I decided on a width of 45 percent simply because I know that I need to add a little margin between the images later, and so having two images totaling 90 percent of the width gives me a little room (10 percent) to play with.
Now that the sidebar images are working, I'll also remove the width and height attributes on the Oscar statue image in the markup. However, unless I set a proportional width value for it, it's not going to scale so I've tweaked the associated CSS to set a proportional width using good ol' trusty target ÷ context = result.
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 698 ÷ 202 */
}So now the images are scaling nicely as the viewport expands and contracts. However, if by expanding the viewport the image scales beyond its native size, things get very ugly. Take a look at Oscar in the following screenshot, with the viewport up to 1900 px:
The oscar.png image is actually 202 px wide. However, with the viewport over 1900 px wide and the image scaling to fit, it's actually displaying over 300 px wide. We can easily "put the brakes on" this image by setting another more specific rule:
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 698 ÷ 202 */
max-width: 202px;
}That would let the oscar.png image scale because of the more general image rule but never go beyond the more specific max-width property set above. Here's how the page looks with this rule set:
Another tack to limit things expanding limitlessly would be to set a max-width property on our entire #wrapper div like this:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* Holding outermost DIV */
max-width: 1414px;
}This means the design will scale to 96 percent of the viewport but will never expand beyond 1414 px wide (I settled on 1414 px as on most modern browsers it cuts the bunting flags off at the end of a flag rather than halfway through one). The following screenshot shows how it looks like with a viewport of around 1900 px:
Obviously these are merely options. It, however, proves the versatility of a fluid grid and how we can control the flow with just a few specific declarations.