Saturday, 5 July 2014

Resize image in HTML

Hello folks,

Lets have a look at the various ways in which an image can be re-sized in an HTML page. I will classify it into 3 different sections. Re-sizing of a background image, regular img tag and sprite image. If you are interested only in re-sizing a sprite image directly jump to last section.

Section 1: How to re-size a background image?

I am sure many of you might be familiar with the background property. It is actually a short-hand property for many other properties; mainly background-image. Look at the example given below.


<style>
 html {
  background: url('worldcup.jpg') center center no-repeat; 
 }
</style>

This will render the image at the center of your page with actual size. Using background-size property, you can re-size the image in different ways.




<style>
 html {
  background: url('worldcup.jpg') center center no-repeat; 
  background-size:contain;
 }
</style>

Above code will re-size the image to 75% of container (here entire page as we apply styles for <html>) width and 50% of its height. If you give background-size: 100% 100%, the image will stretch to complete page.
There is 2 other different values that can be given to background-size. contain and cover.
The contain value specifies that regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container (courtesy: mozilla).
The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. 

Section 2: How to re-size an image loaded with <img> tag?

This is very easy. Look at the example given below.


<html>
 <style>
  .imagecontainer {
    width: 50%; 
  }
  .imagecontainer img {
    max-width: 100%;
    height: auto;
  }
 </style>
 <body>
  <div class="imagecontainer">
    <img src="cup.jpg" />
  </div>
 </body>
</html>

The image tag is included in a container which has 50% of the page width. Inside that container the image will be rendered fully no matter of the size of the window or image.

Section 3: How to re-size a sprite image?


This section will be interesting for CSS folks. I thought re-sizing of an image in a sprite is not possible. But after trying out for sometime, I got a solution.


<html>
 <style>
  .brazilflag,  .brazilflag_small { 
   display: inline-block; 
   background: url('flags.png') no-repeat; 
   overflow: hidden; 
  }
  .brazilflag { 
   background-position: -0px -2336px; 
   width: 256px; 
   height: 178px; 
  }
  .brazilflag_small { 
   background-position: -0px -0px; 
   width: 25px; 
   height: 18px; 
   background-size: 100%;
  }
 </style>
 <body>
  <div class='brazilflag'></div>
  <div class='brazilflag_small'></div>
 </body>
</html>

This is how I got Brazil flag of 2 different sizes from the same sprite of all country flags (Im not a Brazil fan though). Don't think that there are separate images for big and small flag in the sprite. There is only one flag for each country. And this is the way to re-size it.

But you can find an issue here. The re-sized image is not responsive. When you change the window dimension the sprite image remains in the same size. I have a solution for that as well.


<html>
 <style>
  .responsiveflag.seemless {
   max-width: none;
  }
  .responsiveflag {
   width: 25%;
  }
  .responsiveflag {
   display: block;
   float: left;
   position: relative;
   overflow: hidden;
   max-width: 260px;
  }
  .responsiveflag .spacer {
   width: 100%;
   height: auto;
  }
  .responsiveflag.seemless .sprite {
   min-width: 100%;
  }
  .responsiveflag .sprite {
   position: absolute;
   left: 0;
   max-width: 100%;
   max-height: none;
  }
  .argentinaflag { 
   top:0%; 
  }
  .brazilflag { 
   top:-100%; 
  }
  .germanyflag { 
   top:-200%; 
  }
 </style>
 <body>
  <div class="responsiveflag seemless">
   <img class="spacer" alt="icon" src="spacer.png">   
   <img class="sprite brazilflag" alt="" src="flags.png">
  </div>
 </body>
</html>

In the above example, we are not depending on the background-size property and interestingly it will work across all browsers! You have to make sure that the spacer image (a dummy image) is having the required dimension same as that of the desired flag size. Here instead of getting the re-sized image from the sprite, we are fetching the image with actual size and then re-sizing it.


Thanks for reading!

No comments:

Post a Comment