How To Create Your site or Blog Images Responsive

Do you have problem with your site or blog images width and height? And you want to make these images responsive? Ok let make images responsive, for this we have to edit our site or blog template to add few codes. 

1. First we have to put first part of code in head section to edit CSS of theme. I will here show you how to add in blogger theme. How to edit theme in blogger, click here

2. In that section you learn how to edit blogger template or theme, Now i will show you how to add code in template or theme

3. Press ctrl+F key from your keyboard a popup window will appear it depend on browser in chrome it will appaer in top right, in firefox it will appear in bottom left side. find this code " ]]</b:skin>" in theme editor as shown in image

4. Add any one of these code just above " ]]</b:skin>" 

(a). Add CSS code : If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto:

.responsive {
  width: 100%;
  height: auto;
}

 

(b). Add this code If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%:

.responsive {
  max-width: 100%;
  height: auto;
}

 

(c). Add this code If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

 

5. Now finaly add this code in html or edit your image class as responstive

<img src="nature.jpg" alt="Nature" class="responsive">

 

Share: