git.cweiske.de / paste / 925.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (initial)
(no commit message) master
authorChristian Weiske <cweiske@cweiske.de>
Wed, 21 May 2025 14:37:57 +0000 (16:37 +0200)
committerChristian Weiske <cweiske@cweiske.de>
Wed, 21 May 2025 14:37:57 +0000 (16:37 +0200)
1024x768.png [new file with mode: 0644] patch | blob
1280x960.png [new file with mode: 0644] patch | blob
1400x1050.png [new file with mode: 0644] patch | blob
1600x1200.png [new file with mode: 0644] patch | blob
3200x2400.png [new file with mode: 0644] patch | blob
320x240.png [new file with mode: 0644] patch | blob
640x480.png [new file with mode: 0644] patch | blob
800x600.png [new file with mode: 0644] patch | blob
responsive-test.htm [new file with mode: 0644] patch | blob

diff --git a/1024x768.png b/1024x768.png
new file mode 100644 (file)
index 0000000..b39701b
Binary files /dev/null and b/1024x768.png differ
diff --git a/1280x960.png b/1280x960.png
new file mode 100644 (file)
index 0000000..703ebec
Binary files /dev/null and b/1280x960.png differ
diff --git a/1400x1050.png b/1400x1050.png
new file mode 100644 (file)
index 0000000..d98c292
Binary files /dev/null and b/1400x1050.png differ
diff --git a/1600x1200.png b/1600x1200.png
new file mode 100644 (file)
index 0000000..84f566c
Binary files /dev/null and b/1600x1200.png differ
diff --git a/3200x2400.png b/3200x2400.png
new file mode 100644 (file)
index 0000000..7a8a821
Binary files /dev/null and b/3200x2400.png differ
diff --git a/320x240.png b/320x240.png
new file mode 100644 (file)
index 0000000..28058b4
Binary files /dev/null and b/320x240.png differ
diff --git a/640x480.png b/640x480.png
new file mode 100644 (file)
index 0000000..181ddc9
Binary files /dev/null and b/640x480.png differ
diff --git a/800x600.png b/800x600.png
new file mode 100644 (file)
index 0000000..ec899f1
Binary files /dev/null and b/800x600.png differ
diff --git a/responsive-test.htm b/responsive-test.htm
new file mode 100644 (file)
index 0000000..ba34962
--- /dev/null
+++ b/responsive-test.htm
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Responsive image test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <style type="text/css">
+   img {
+       width: 100%;
+       height: 200px;
+       object-fit: cover;
+   }
+   div.c5050 {
+       background-color: #EEE;
+       display: flex;
+   }
+   div.c5050 > div {
+       flex: 1 1 0;
+   }
+  </style>
+ </head>
+ <body>
+  <h1>Full width</h1>
+  <img alt="full width"
+       src="3200x2400.png"
+       srcset="320x240.png 320w,
+               640x480.png 640w,
+               800x600.png 800w,
+               1024x768.png 1024w,
+               1280x960.png 1280w,
+               1400x1050.png 1440w,
+               1600x1200.png 1600w,
+               3200x2400.png 3200w
+               "
+       sizes="(max-width: 320px) 320px,
+              (max-width: 640px) 640px,
+              (max-width: 800px) 800px,
+              (max-width: 1024px) 1024px,
+              (max-width: 1280px) 1280px,
+              (max-width: 1400px) 1440px,
+              (max-width: 1600px) 1600px,
+              3200px
+              "
+       />
+
+  <h1>50:50 container</h1>
+  <div class="c5050">
+   <div>
+    50-50-left
+   </div>
+   <div>
+    <img alt="full width"
+         src="3200x2400.png"
+         srcset="320x240.png 320w,
+                 640x480.png 640w,
+                 800x600.png 800w,
+                 1024x768.png 1024w,
+                 1280x960.png 1280w,
+                 1400x1050.png 1440w,
+                 1600x1200.png 1600w,
+                 3200x2400.png 3200w
+                 "
+         sizes="(max-width: 320px) 320px,
+                (max-width: 640px) 320px,
+                (max-width: 800px) 640px,
+                (max-width: 1024px) 640px,
+                (max-width: 1280px) 640px,
+                (max-width: 1400px) 800px,
+                (max-width: 1600px) 800px,
+                3200px
+                "
+         />
+   </div>
+  </div>
+ </body>
+</html>
HTML: responsive images with srcset and sizes