Responsive web design is used to make our web page look appropriate, good, and well-placed on all devices (desktop, tablet, smartphone etc.)
Responsive web design uses HTML and CSS to resize, hide, shrink, enlarge, or move the content. It makes the content look good on any screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
Set the CSS width property to 100% to make the image responsive and scale up and down.
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h2> Responsive Image </h2> <p> When we set the CSS width property to 100%, it makes the image responsive. Resize the browser window to see the effect. </p> <img src="logo-192x192.png" style="width:100%;"> // change image </body> </html>
The Problem with above code, is that will scale up or down but, image exceeding beyonds it's original size. It's better to use max-width css property to prevent it from exceeding from it's original size.
This method is best and most used because it facilitates that the image will scale down if it has to, but never scale up to be larger than its original size.
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h2> Responsive Image </h2> <p> makes the image responsive and also ensures that the image doesn't get bigger than its original size. </p> <p> Resize the browser window to see the effect. </p> <img src="/logo-192x192.png" style="max-width:100%;height:auto;"> (Change the image) </body> </html>