Responsive Images using CSS

Its a short tutorial to make your images responsive in your website.

The HTML code would be as follows:

<img alt="" src="..your_im_path.." />

To make the image responsive lets enclose it a div with a class “img_wrapper”:

<div class="img_wrapper">
<img alt="" src="..your_im_path.." />
</div>

So now we will add our css to make it responsive:

.img_wrapper{
max-width:100% !important;
height:auto;
display:block;
}

This little code makes your image responsive!
Enjoy! ^_^

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s