How to make images responsive?

Text on the web automatically wraps at the edge of the screen, but images don't. Images have an intrinsic size, so if they are wider than the screen, they will overflow, causing a horizontal scrollbar to appear. Fortunately, you can take measures in CSS to stop this from happening.

The height will adjust by assigning a new value to the image's width property. It would be best to use relative units (like percentages) when assigning values to an element's size instead of absolute units like pixels.

For instance:

img {
width: 800px;
}

The above code sets a fixed width of 800px. However, look at the code below; this will make the image responsive because we have used relative units.

img {
width: 70%;
}

When you use a relative unit like 70% in the image property, the image will resize itself automatically to fit any screen.

To check the responsiveness of your mobile websites and web applications, check out LT Browser 2.0, our free responsive testing browser.