-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
58 lines (53 loc) · 2.26 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4 resizes</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
img {
max-width: 100%;
height: auto;
}
figure.image {
text-align: center;
}
</style>
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-md-9">
<p>
Suppose you have a large image that is over 1600px named autum.jpg,
and you have resized it to 400px, 800px, 1200px and 1600px files,
and suppose you don't want to involve the original file here because
of its size, you want to as efficient as possible. So you want the 1200px
to be 2x and 1600px to be 3x.
</p>
<figure class="image">
<img src="img/autum-800.jpg" srcset="img/autum-400.jpg 400w,
img/autum-800.jpg 800w,
img/autum-1200.jpg 2x,
img/autum-1600.jpg 3x" sizes="(max-width: 800px) 100vw, 1200px" alt="autum">
</figure>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus odit, doloremque possimus at
dignissimos laudantium? Repellat laboriosam laborum fugiat, tempora totam unde error aut enim ea?
Error maxime officia numquam.</p>
</div>
<aside class="col-md-3">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quasi ipsum sed, laborum, ab
dolorem
dolores at doloremque necessitatibus sequi, consequuntur corporis rem aspernatur quibusdam
perspiciatis
laboriosam ad numquam? Accusamus.
</p>
</aside>
</div>
</main>
</body>
</html>