-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex3.html
55 lines (50 loc) · 2.07 KB
/
index3.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
<!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>2 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 an image that is over 800px but less than 1200px named autum.jpg,
and you have resized it to 400px, 800px and the original,
so in this case you have the original with its width there.
</p>
<figure class="image">
<img src="img/autum-800.jpg" srcset="img/autum-400.jpg 400w,
img/autum-800.jpg 800w,
img/autum.jpg 2880w" 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>