Horje
How to create HTML Responsive Images Using the max-width Property | HTML Responsive Code
How to create HTML Responsive Images Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:


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:

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



Read Full::
HTML Responsive Code
Category:
HTML Code
Sub Category:
HTML Responsive Code
Uploaded:
9 months ago
Uploaded by:
Admin
Views:
3

Related Articles
What is HTML Responsive HTML Responsive Code
How to Setting The Viewport HTML Responsive Code
How to create HTML Responsive Images HTML Responsive Code
How to create HTML Responsive Images Using the max-width Property HTML Responsive Code
How to show Different Images Depending on Browser Width HTML Responsive Code
How to create HTML Responsive Text Size HTML Responsive Code
How to create Media Queries HTML Responsive Code
How to create Responsive Web Page - Full Example HTML Responsive Code
How to create HTML Responsive Web Design - Frameworks HTML Responsive Code

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

Share on: