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:
| What is HTML Responsive | HTML Responsive |
| How to Setting The Viewport | HTML Responsive |
| How to create HTML Responsive Images | HTML Responsive |
| How to create HTML Responsive Images Using the max-width Property | HTML Responsive |
| How to show Different Images Depending on Browser Width | HTML Responsive |
| How to create HTML Responsive Text Size | HTML Responsive |
| How to create Media Queries | HTML Responsive |
| How to create Responsive Web Page - Full Example | HTML Responsive |
| How to create HTML Responsive Web Design - Frameworks | HTML Responsive |
| How is to HTML Input Type Search | HTML Responsive |
| Full Code Example of HTML Input Type Search | HTML Responsive |
Type: | Html |
Category: | Web Tutorial |
Sub Category: | HTML Responsive |
Uploaded by: | Admin |