Merge pull request #16 from JulieSagan/srcset

Created image used srcset
js-tasks-ru · Dec 19, 2024 · 54e79f1 · 54e79f1
2 parents c6f98e0 + 36907fc
commit 54e79f1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/06-lection4/03-srcset/index.html b/06-lection4/03-srcset/index.html
@@ -1,10 +1,27 @@
 <!DOCTYPE html>
 <html lang="ru">
-    <head>
-        <link rel="stylesheet" href="../../assets/css/main.css">
-        <link rel="stylesheet" href="./srcset.css">
-    </head>
-    <body>
-
-    </body>
-</html>
+
+<head>
+    <link rel="stylesheet" href="../../assets/css/main.css">
+    <link rel="stylesheet" href="./srcset.css">
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Srcset</title>
+</head>
+
+<body>
+    <div class="image__wrapper">
+        <img src="./public/forest_400.jpg" alt="forest image" 
+
+             srcset="
+             ./public/forest_400.jpg 400w,
+             ./public/forest_768.jpg 768w"
+
+             sizes="
+             (max-width: 400px) 300px,
+             (max-width: 768px) 300px">
+    </div>
+</body>
+
+</html>
diff --git a/06-lection4/03-srcset/srcset.css b/06-lection4/03-srcset/srcset.css
@@ -0,0 +1,5 @@
+.image__wrapper {
+    width: 300px;
+    height: 300px;
+    overflow: hidden;
+}