resolution switch on img

fbohz · Jun 29, 2020 · 3074861 · 3074861
1 parent f8d56df
commit 3074861
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/museo-demo/img/nat-1-large.jpg b/museo-demo/img/nat-1-large.jpg
diff --git a/museo-demo/img/nat-2-large.jpg b/museo-demo/img/nat-2-large.jpg
diff --git a/museo-demo/img/nat-3-large.jpg b/museo-demo/img/nat-3-large.jpg
diff --git a/museo-demo/index.html b/museo-demo/index.html
@@ -66,9 +66,17 @@ <h3 class="heading-tertiary u-margin-bottom-small">Adventure is calling</h3>
                     </div>
                     <div class="col-1-of-2">
                         <div class="composition">
+
                             <img src="img/nat-1.jpg" alt="Photo1" class="composition___photo composition___photo--p1">
-                            <img src="img/nat-2.jpg" alt="Photo2" class="composition___photo composition___photo--p2">
+
+                            <img srcset="img/nat-2.jpg 300w, img/nat-2-large.jpg 1000w"
+                            sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
+                            alt="Photo2"
+                            class="composition___photo composition___photo--p2"
+                            src="img/nat-2.jpg">
+
                             <img src="img/nat-11.jpg" alt="Photo3" class="composition___photo composition___photo--p3">
+                            <!-- <img src="img/nat-2.jpg" alt="Photo2" class="composition___photo composition___photo--p2"> -->
                         </div>
                     </div>
                 </div>