Using the max-width Property

#	Content	Views
1.	Tutorial Tags	37,061
2.	Tutorial + Programming	1,062,123
3.	Videos	353,309
4.	Results (`Annual + Re-appear`)	44,967
5.	Quiz Chapters	37,147
6.	Quiz Questions	540,385
7.	Quiz Results	29,742
8.	Testimonials	7,594
9.	Projects	33,794
10.	e-Words	22,246
11.	e-Certificates	4,968
12.	Downloads (Softwares)	121,500
13.	Downloads (Syllabus)	2,638

Home
HTML
Responsive
Using The Max-Width Property

Using the max-width Property

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:

Responsive Image

"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.

Example

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

<h2>Responsive Image - Using the max-width Property</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="/images/cat.jpg" style="max-width:100%;height:auto;">

</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #images #responsive

CSPunjab.Com

Using the max-width Property

« Previous

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:

Responsive Image

"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.

Example

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

<h2>Responsive Image - Using the max-width Property</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="/images/cat.jpg" style="max-width:100%;height:auto;">

</body>
</html>

Live Demo & Try it yourself!