Responsive Images

Recently, I have been getting a lot of

1. Requests for an article on Responsive Images,
2. and error-sheets of my responsive projects mentioning that some full screen image is cropped in x resolution(s).

So, this motivated me to write an article on Responsive Images. Part1 of this series is more aimed at Project Managers and Designers. But nevertheless, Front End developers can also follow along; your valuable time in explaining the team how Responsive Images work will be saved.

Embrace the Environment

We are living in a world where there is a strong proliferation of internet based devices in Market. From Tablets, to phones to wearable glasses, it won’t be too long that our refrigerators and bath tubs will have a tablet with a browser in them. The main issue is not the screen resolution but the Aspect Ratio.

1. Image Cropping Method
2. Maximum Width Scale Method
3. Bonus

Image Cropping Method

This method is very popular for full screen backgrounds. The images are cropped and approximately shown what region is required.

Maximum Width/Height Scale Method

In the next method, we will set a maximum width (or height) for the image. The image will proportionately scale down as per the image aspect ratio. Image scaling will be as per the image dimension(height and width) and not as per browser size. Plus Point: Your images won’t be cropped!

/* for horizontally rectangular images */<br></br>
img{
    max-width: 100%
}
/* for vertically rectangular images */<br></br>
img{
    max-height: 100%<br></br>
}

Now, if we want to use this method for our background image, the image will have either a white-space or scroll as follows:

Thus, we will not be able to use Maximum Width/Height Scale Method if we want to use a full screen image (100% width and 100% height) without a scroll or a whitespace. Image Cropping Method is the only solution when we need a background image which spans 100% width and height of browser without scroll.

one last Thing…..

Squeeze the bloody Image (bonus)

This isn’t a method per say, But for all those front end developers who have some sort of grudge for the designer, this method will definitely serve your revengeful needs. You will use this method and bet you, the designer will definitely get exasperated.

img.irritate{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0
}

So, That’s All for today!
Will be bringing you the next parts very soon!
Till then,
Keep Rocking!