Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 322

A solution to the Art Direction Problem is to use min-width for the full-size photo and provide a small, cropped
image for resolutions smaller than the specified minimum width (Listing 9-7).
Listing 9-7. Cropped Image Version for Low-Resolution Displays, Full Version for High-Resolution Screens
<picture>
<source media="(min-width: 960px)" srcset="bridge-full.jpg">
<img src="bridge-closeup.jpg" alt="The Sydney Harbour Bridge">
</picture>
For browser windows with a width of 960 pixels and wider, the big-resolution photo is used while smaller browser
windows will display the close-up version.
Text Around Objects
In many cases, web page text should “wrap around” an object or image. You can achieve this effect by using the float
property; in other words, the image (or its container) should float (Listing 9-8).
Listing 9-8. Styles for Containers of Floating Images
#onleft {
float: left;
}
#onright {
float: right;
}
Figure 9-5 shows an image without styling and two floating images that use the previous rules. Without floating,
the text does not wrap around the image: only the first line of the text appears next to the image (top photo). The
second image applies the first rule of Listing 9-8 and is rendered on the left, surrounded by text on the right. The third
image uses the second rule of Listing 9-8 and appears on the right, while the text surrounds the image on the left.