Responsive images is a interesting topic and one that’s been progressively gaining attention over the last year; as more designer’s discover to get perfect solution for their designs. Responsive images are a minor part of the approachable design methodology, which aims to adapt a website so it works optimally within known environmental constraints like display dimensions etc.
CSS controls the presentational features of web pages and is prepared with MEDIA QUERIES to act as environment sensors. We can then write rules to adjust the pictorial design according to the results of each environment test. Here we are not talking about MEDIA QUERIES, we are talking about to adjust images for different views and layout. But before talking about responsive images let we talk about theviewportmeta tag.
Why we use viewport meta tag?
We are usingviewportmeta tag to control the mobile browsers. The meta tag for the mobile browsers is like:
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
Here is the code to make Responsive images:
img {
max-width: 100%;
}
Why do we use “max-width”? Because “max-width” force the image width to match the width of it’s container that hold our image. The “max-width” property is not only for responsive image, you can use this property to most fixed element, like videos, objects etc. Take a look on the give example:
img,
embed,
object,
video {
max-width: 100%;
}