The following code may be used to give freedom to the image to scale whenever its parent container had been resized. The maximum width was set to 100 percent of the original size and its height may follow the same image proportion automatically:
img {
max-width: 100%;
height: auto;
}Although, to use this effectively, the image must be large enough to scale up to whatever size we may reasonably expect on the largest possible display. However, images that are optimized for desktop sites are still quite heavy for a mobile Internet speed.
Tip
If you are using the max-width or height tags to resize JPG images in your DOM, you will probably see pixelated images only on browser IE7 or older versions. However, there is a simple code for solving this problem:
img {
-ms-interpolation-mode: bicubic;
}This specific problem was fixed in IE8 and became obsolete in IE9.