Pure CSS Based responsive image using HTML5

These days it is more important you design your website in a responsive way.¬†Smartphone revolution is being happenings and every one uses smartphones even for browsing. This makes the web designer to create websites according to the devices. To lessen the burden of programming for different devices, one creation should work for any devices. This is called as responsive design. Here i will be showing you one such responsive way of showing images. As you change the resolution, accordingly¬†the image width and height changes. Below snapshot shows the image for different browser sizes – you can notice the image being re-sized accordingly to fit the browser’s size.

Responsive Image Demo

Step 1 : include the below CSS in the Head section of your HTML Template.

<style type=”text/css”>
/* responsive image */
img {
max-width: 100%;
height: auto;
@media \0screen {
img {
width: auto; /* for ie 8 */
figure {
margin: 0;
/* html5 elements */
figure {
display: block;

Max-width property allows you to set the max width and Height of the image respectively. You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto. The above CSS works for all browsers.

Step 2 : Include the below content in the Body section of your HTML Template

<h4>In supported browsers, the following image will load either small or large version depending on screen resolution. You can see image size adjusting as you change your browser size or resolution</h4>
<img src=”http://demo.techglimpse.com/responsiveimg/responsive-technology.jpg” alt=”Responsive Technology for Auto Image Resize using CSS and HTML 5″>

Here the figure is a HTML5 Element. Enjoy the responsive auto resize of image using simple pure CSS and HTML5 tricks.

Related Content
vps germany
Disclaimer: The content published in this article is the views of the author only. Techglimpse does not gurantee accuracy, completness or validity. If you believe the content on this post violates your copyright, please send us a mail for removal. Read more.