Resizing images is an important element of modern website design. This is because site visitors can't be expected to use the same devices, or screens that have a fixed size. The website that you are building has to display images properly, whether that is on a full-sized computer screen, or a mobile device with a screen that measures only four inches when it comes to some popular smartphones. Ideally, as the screen gets smaller, the image should dynamically change in size. There are lots of ways to do this, but one of the simplest is by resizing images with CSS.
This is often referred to as fluid images -- the scale of the image is fluid, depending on the size of the device that is being used. But images are not fluid by default. Without any changes, they will remain the same size, regardless of the size of the device. Obviously this results in cropping as the screen gets smaller.
Responsive website design is all about ensuring that a website can display pages properly in whatever size of screen the visitor is using. This involves resizing images using CSS.
But here's the thing -- you are not actually resizing the images. Instead you are making them appear resized so that they fit into the user's browser. This is done by setting the maximum width of the image as a percentage.
For example:
img {
max-width:100%;
}
This will set the image to display at 100 percent of the width of the container. As the container gets smaller, the image will display at the reduced size, always staying at 100 percent of the container.
What about the height of an image? If the images in your site have width and height attributes, the above code will present a problem -- the width will scale down as the screen decreases in size, but the height will remain the same. Thisis easily corrected with the following code:
img {
max-width:100%;
height:auto;
}
More Control
Using the max-width solution is ideal for a number of situations, including the feature images used by articles. But what if filling 100 percent of the screen's width is inappropriate? This might occur if you have images within documents that are placed within the text. Using a 100 percent width might also be unsuitable if your images are quite tall. The second code example that was highlighted above will automatically resize the height of the image so that the proportions are correct.However, the overall height of the image might still mean that a large area of the screen is dominated by the image. This leaves little room for text unless the user scrolls.
So here is an example where there is an image with text that is aligned to the right of it -- so the image is beside the text. As a result, setting the width to 100 percent won't be ideal.
Instead, you would use code something like this:
<imgsrc="your_image.png" alt="Your alt text" style="float: left; width:40%;margin-left:2rem">
This floats the image to the left of the text with a margin, and keeps the image to 40 percent of the width of the container. So, as the screen size reduces, the image always stays at 40 percent.
Retina Issues
The above solution deals with Retina images, which contain double the amount of pixels. The original image-width solution, on the other hand, does not handle these sorts of images well.
But even the example above does run into problems, particularly if very large screens are used. A solution to this is to set a maximum width of the image in pixels.
In this example, let's assume the image is 600px wide. Regardless of the screen size, we don't want the image to be more than 600px or it will start to look distorted. So, the following code can be used:
<imgsrc="your_image.png" alt="Your alt text" style="float: left; width:40%;margin-left:2rem;max-width:600px;">
Finally, you should be aware that these solutions use CSS3 selectors. They will work on most modern browsers but will not work on Internet Explorer 8 or below.
