HTML Tutorials

#	Content	Views
1.	Tutorial Tags	15,822
2.	Tutorial + Programming	678,586
3.	Videos	218,835
4.	Results (`Annual + Re-appear`)	12,699
5.	Quiz Chapters	14,622
6.	Quiz Questions	172,775
7.	Quiz Results	18,822
8.	Testimonials	3,462
9.	Projects	28,286
10.	e-Words	12,023
11.	e-Certificates	4,968
12.	Downloads (Softwares)	4,237
13.	Downloads (Syllabus)	948

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down:

Responsive Image

When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.

Example

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

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

<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>

<img src="/images/cat.jpg" style="width:100%;">

</body>
</html>

Live Demo & Try it yourself!

#CSS #HTML #responsive images

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

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below changes depending on the width:

Show Different Images Depending on Browser Width

Resize the browser width and the image will change at 600px and 1500px.

Flowers

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

<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>

<picture>
  <source srcset="/images/computer_lab.jpg" media="(max-width: 600px)">
  <source srcset="/images/cat.jpg" media="(max-width: 1500px)">
  <source srcset="/images/kitten.gif">
  <img src="/images/cat.jpg" alt="cat" style="width:auto;">
</picture>

</body>
</html>

Live Demo & Try it yourself!