learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html at main · mdn/learning-area

History

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!doctype html>

<head>

<title>Responsive HTML images demo</title>

<style>

img {

width: 320px;

}

</style>

</head>

<body>

<img

srcset="

elva-fairy-320w.jpg,

elva-fairy-480w.jpg 1.5x,

elva-fairy-640w.jpg 2x

"

src="elva-fairy-640w.jpg"

alt="Elva dressed as a fairy"

id="img"

>

/>

function showUrl() {

const img = document.getElementById("img");

const p = document.createElement("p");

const fileName = img.currentSrc?.substring(

img.currentSrc.lastIndexOf("/"),

);

p.textContent = `Loaded: ${fileName}`;

document.body.appendChild(p);

}

</script>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

srcset-resolutions.html

srcset-resolutions.html

Files

srcset-resolutions.html

Latest commit

History

srcset-resolutions.html

File metadata and controls