Full Example of HTML Responsive Images Using the max-width Property

"max-width:100%" prevents the image from getting bigger than its original size. However, if you make the browser window smaller, the image will still scale down. Resize the browser window to see the effect.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>"max-width:100%" prevents the image from getting bigger than its original size. However, if you make the browser window smaller, the image will still scale down.</p>
<p>Resize the browser window to see the effect.</p>

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

</body>
</html>

Output should be:

Type:	html
Category:	Web Tutorial
Sub Category:	HTML Responsive
Uploaded by:	Admin