rich1.0phorkiehttps://p.cweiske.de/HTML: responsive images with srcset and sizesChristian Weiske86400900900<!-- embedding all files of https://p.cweiske.de/925 -->
<link rel="stylesheet" href="https://p.cweiske.de/css/embed.css"/>
<div class="phork" id="925">
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/1024x768.png" alt="1024x768.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/1024x768.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/925#1024x768.png">1024x768.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/1280x960.png" alt="1280x960.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/1280x960.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/925#1280x960.png">1280x960.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/1400x1050.png" alt="1400x1050.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/1400x1050.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/925#1400x1050.png">1400x1050.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/1600x1200.png" alt="1600x1200.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/1600x1200.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/925#1600x1200.png">1600x1200.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/3200x2400.png" alt="3200x2400.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/3200x2400.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/925#3200x2400.png">3200x2400.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/320x240.png" alt="320x240.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/320x240.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/925#320x240.png">320x240.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/640x480.png" alt="640x480.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/640x480.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/925#640x480.png">640x480.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<div class="image"><img src="925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/800x600.png" alt="800x600.png"/></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/800x600.png" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/925#800x600.png">800x600.png</a>
</div>
</div>
<div class="phork-file">
<div class="phork-content">
<style type="text/css">/**
* GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2014 Benny Baumann
* (http://qbnz.com/highlighter/ and http://geshi.org/)
*/
.xml .de1, .xml .de2 {font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;}
.xml {font-family:monospace;}
.xml .imp {font-weight: bold; color: red;}
.xml li, .xml .li1 {color: #DDD;}
.xml .ln {width:1px;text-align:right;margin:0;padding:0 2px;vertical-align:top;}
.xml .es0 {color: #000099; font-weight: bold;}
.xml .br0 {color: #66cc66;}
.xml .sy0 {color: #66cc66;}
.xml .st0 {color: #ff0000;}
.xml .sc-1 {color: #808080; font-style: italic;}
.xml .sc0 {color: #00bbdd;}
.xml .sc1 {color: #ddbb00;}
.xml .sc2 {color: #339933;}
.xml .sc3 {color: #009900;}
.xml .re0 {color: #000066;}
.xml .re1 {color: #000000; font-weight: bold;}
.xml .re2 {color: #000000; font-weight: bold;}
.xml span.xtra { display:block; }
</style><div class="code"><table class="xml"><tbody><tr class="li1"><td class="ln"><pre class="de1">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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
</pre></td><td class="de1"><pre class="de1"><span class="sc0"><!DOCTYPE html></span>
<span class="sc3"><span class="re1"><html<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"><head<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><title<span class="re2">></span></span></span>Responsive image test<span class="sc3"><span class="re1"></title<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><meta</span> <span class="re0">name</span>=<span class="st0">"viewport"</span> <span class="re0">content</span>=<span class="st0">"width=device-width, initial-scale=1"</span><span class="re2">/></span></span>
  <span class="sc3"><span class="re1"><style</span> <span class="re0">type</span>=<span class="st0">"text/css"</span><span class="re2">></span></span>
   img {
       width: 100%;
       height: 200px;
       object-fit: cover;
   }
   div.c5050 {
       background-color: #EEE;
       display: flex;
   }
   div.c5050 > div {
       flex: 1 1 0;
   }
  <span class="sc3"><span class="re1"></style<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"></head<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"><body<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><h1<span class="re2">></span></span></span>Full width<span class="sc3"><span class="re1"></h1<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><img</span> <span class="re0">alt</span>=<span class="st0">"full width"</span></span>
<span class="sc3">       <span class="re0">src</span>=<span class="st0">"3200x2400.png"</span></span>
<span class="sc3">       <span class="re0">srcset</span>=<span class="st0">"320x240.png 320w,</span></span>
<span class="sc3"><span class="st0">               640x480.png 640w,</span></span>
<span class="sc3"><span class="st0">               800x600.png 800w,</span></span>
<span class="sc3"><span class="st0">               1024x768.png 1024w,</span></span>
<span class="sc3"><span class="st0">               1280x960.png 1280w,</span></span>
<span class="sc3"><span class="st0">               1400x1050.png 1440w,</span></span>
<span class="sc3"><span class="st0">               1600x1200.png 1600w,</span></span>
<span class="sc3"><span class="st0">               3200x2400.png 3200w</span></span>
<span class="sc3"><span class="st0">               "</span></span>
<span class="sc3">       <span class="re0">sizes</span>=<span class="st0">"(max-width: 320px) 320px,</span></span>
<span class="sc3"><span class="st0">              (max-width: 640px) 640px,</span></span>
<span class="sc3"><span class="st0">              (max-width: 800px) 800px,</span></span>
<span class="sc3"><span class="st0">              (max-width: 1024px) 1024px,</span></span>
<span class="sc3"><span class="st0">              (max-width: 1280px) 1280px,</span></span>
<span class="sc3"><span class="st0">              (max-width: 1400px) 1440px,</span></span>
<span class="sc3"><span class="st0">              (max-width: 1600px) 1600px,</span></span>
<span class="sc3"><span class="st0">              3200px</span></span>
<span class="sc3"><span class="st0">              "</span></span>
<span class="sc3">       <span class="re2">/></span></span>
 
  <span class="sc3"><span class="re1"><h1<span class="re2">></span></span></span>50:50 container<span class="sc3"><span class="re1"></h1<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"><div</span> <span class="re0">class</span>=<span class="st0">"c5050"</span><span class="re2">></span></span>
   <span class="sc3"><span class="re1"><div<span class="re2">></span></span></span>
    50-50-left
   <span class="sc3"><span class="re1"></div<span class="re2">></span></span></span>
   <span class="sc3"><span class="re1"><div<span class="re2">></span></span></span>
    <span class="sc3"><span class="re1"><img</span> <span class="re0">alt</span>=<span class="st0">"full width"</span></span>
<span class="sc3">         <span class="re0">src</span>=<span class="st0">"3200x2400.png"</span></span>
<span class="sc3">         <span class="re0">srcset</span>=<span class="st0">"320x240.png 320w,</span></span>
<span class="sc3"><span class="st0">                 640x480.png 640w,</span></span>
<span class="sc3"><span class="st0">                 800x600.png 800w,</span></span>
<span class="sc3"><span class="st0">                 1024x768.png 1024w,</span></span>
<span class="sc3"><span class="st0">                 1280x960.png 1280w,</span></span>
<span class="sc3"><span class="st0">                 1400x1050.png 1440w,</span></span>
<span class="sc3"><span class="st0">                 1600x1200.png 1600w,</span></span>
<span class="sc3"><span class="st0">                 3200x2400.png 3200w</span></span>
<span class="sc3"><span class="st0">                 "</span></span>
<span class="sc3">         <span class="re0">sizes</span>=<span class="st0">"(max-width: 320px) 320px,</span></span>
<span class="sc3"><span class="st0">                (max-width: 640px) 320px,</span></span>
<span class="sc3"><span class="st0">                (max-width: 800px) 640px,</span></span>
<span class="sc3"><span class="st0">                (max-width: 1024px) 640px,</span></span>
<span class="sc3"><span class="st0">                (max-width: 1280px) 640px,</span></span>
<span class="sc3"><span class="st0">                (max-width: 1400px) 800px,</span></span>
<span class="sc3"><span class="st0">                (max-width: 1600px) 800px,</span></span>
<span class="sc3"><span class="st0">                3200px</span></span>
<span class="sc3"><span class="st0">                "</span></span>
<span class="sc3">         <span class="re2">/></span></span>
   <span class="sc3"><span class="re1"></div<span class="re2">></span></span></span>
  <span class="sc3"><span class="re1"></div<span class="re2">></span></span></span>
 <span class="sc3"><span class="re1"></body<span class="re2">></span></span></span>
<span class="sc3"><span class="re1"></html<span class="re2">></span></span></span>
 </pre></td></tr></tbody></table></div>
</div>
<div class="phork-meta">
<a href="https://p.cweiske.de/925/rev-raw/d5a6a401aec8311a06a44432d4fe65227d2d53df/responsive-test.htm" style="float: right">view raw source</a>
<a href="https://p.cweiske.de/925#responsive-test.htm">responsive-test.htm</a>
</div>
</div>
</div>