Images are an integral part of responsive web design, a concept introduced by Ethan Marcotte,
that allows web designers to make a website fits well across a range of mobile devices and
platforms. Traditional approach for creating separate URLs for different devices couldn’t cope up
with the specifications of variety of devices employed by users to access websites.
Responsive web design is the handy approach that provides webmasters create a website that is
compatible across a range of devices. Contrary to the traditional approach where separate URLs
were needed to create, RWD only utilizes a single URL which recognizes and responds to the
context on its own. It’s a practice that considers all aspect of the user experience, and quite often
makes use of images.
Images are exciting as well as challenging aspect of a responsive design. Images make a design
stand out and make a website look truly engaging. And, when talking about responsive images,
how you’d be a crime not to highlight the virtues of CSS.
CSS has come a long way when it comes to creating inspiring responsive images. It is one of the
simplest approaches available to build images that look graceful when viewed on a variety of
devices. In this tutorial, I will explain you the entire process of creating responsive images with the
help of CSS. Hopefully, you’ll find the tutorial helpful and bookmark it for the future reference. So,
without rambling on too much further, lets begin:
Creating a Basic Responsive Image
To make the guide comprehensive for you, I am using a very simple and basic <img> that we
are going to make responsive in the later part of the tutorial. The <div> can be considered as a
container for the <img> element. With the help of a simple <img> tag, we can determine the width
as a percentage of the containing element and the browser will automatically calculate the width
and scale it accordingly.
The HTML
<div class="container"> <img src="image01.jpg" width="960" height="640" /> </div>
In the above code, we start by giving percentage based width for a div. For example- we have
assigned the width-property up to 96% and add max width- 960, so that the layout reacts to the
size of the large screens proportionately.
You can now go on to make your image resize automatically by setting the width up to 100% and
height auto. 100% will make the image compatible for the container, so every time a page has
been resized, the container also gets resized, so as the image. This is how the code looks:
img { max-width: 100%; height: auto; }
The above responsive image is compatible with IE7 and IE9, but not with IE8. To make it work on
IE8 as well simply apply conditional CSS for IE8 or you can use IE trick, like this:
@media screen { img { width: auto; /* for ie 8 */ } }
CSS
div.container { width: 96%; max-width: 960px; margin: 0 auto; /* to center the container */ } img { width: 100%; height: auto; }
Note: This approach requires you to set the width property and height using the HTML markup,
because then only you’ll be able to create a responsive image.
Creating Responsive Images with Columns
There are times when you feel the need to display images on the columns. It’s a nice practice to
revamp the overall look and feel of your website. The practice is extremely simple. All you need
is just reduce the CSS width property and assign a display property value (inline-block) to the
element.
There are a variety of layout schemes that designers are implementing, these days. Here, we
will discuss about two most common image layout schemes- Two-column and three-column
responsive images.
Two-column Responsive Images
Continuing with the above example, we can adjust the CSS width-property to 48% ( half of the
container). It’s worth noticing that I haven’t set the value up to 50% so that margins can be
provided on both of the sides.
Now, we can proceed to modify HTML and CSS like this:
<div class="container"> <img src="picture1.jpg" width="960" height="640" /> <img src="picture2.jpg" width="960" height="640" /> </div>
CSS
img { width: 47%; display: inline-block; }
Creating Three-column Responsive Image Column
In the case of three-column responsive image layout, the CSS width-property can be set up to 32%
or we can say one third of the container’s width.
HTML
<div class="container"> <img src="picture1.jpg" width="960" height="500" /> <img src="picture2.jpg" width="960" height="500" /> <img src="picture3.jpg" width="960" height="500" /> </div>
CSS
img { width: 32%; display: inline-block; }
To Wrap Up And that’s all! As of now you have gained a pretty good understanding of the process of creating
responsive images using CSS. Now, get ready to create inspiring mobile-friendly images and let
your design create a stir.
No Comment