https://wiki.stephanschlegel.de/index.php?action=history&feed=atom&title=CSS_-_Aspect_Grid 2026-05-09T05:43:57Z Versionsgeschichte dieser Seite in Wikizone MediaWiki 1.35.14 https://wiki.stephanschlegel.de/index.php?title=CSS_-_Aspect_Grid&diff=22541&oldid=prev 2017-10-28T11:37:15Z

<p></p> <table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="de"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 28. Oktober 2017, 11:37 Uhr</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l94" >Zeile 94:</td> <td colspan="2" class="diff-lineno">Zeile 94:</td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/syntaxhighlight&gt;</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/syntaxhighlight&gt;</div></td></tr> <tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr> <tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Es bietet sich an mit den stretch Klassen zu arbeiten (siehe CSS - <del class="diffchange diffchange-inline">Helper</del>)</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Es bietet sich an mit den stretch Klassen zu arbeiten (siehe <ins class="diffchange diffchange-inline">[[</ins>CSS - <ins class="diffchange diffchange-inline">Helpers (helpers.css)]] </ins>)</div></td></tr> </table>

Steff https://wiki.stephanschlegel.de/index.php?title=CSS_-_Aspect_Grid&diff=22540&oldid=prev 2017-10-28T11:33:23Z

<p>Die Seite wurde neu angelegt: „&lt;syntaxhighlight lang=&quot;CSS&quot;&gt; <span dir="auto"><span class="autocomment">********************************** Aspect grid by stephanschlegel.de Version: 1.0.0 ***********************************: </span> .a…“</span></p> <p><b>Neue Seite</b></p><div>&lt;syntaxhighlight lang=&quot;CSS&quot;&gt;<br /> /***********************************<br /> Aspect grid by stephanschlegel.de<br /> Version: 1.0.0<br /> ************************************/<br /> .a-container,<br /> .a-wrap,<br /> .a-outer{<br /> position: relative;<br /> padding:0;<br /> width: 100%;<br /> }<br /> .a-inner{<br /> padding: 12px;<br /> position: absolute;<br /> overflow-x:hidden;<br /> overflow-y:auto;<br /> width: 100%;<br /> top: 0;<br /> bottom: 0;<br /> }<br /> .a-3-4{ /* 3:4 Aspect Ratio */<br /> width: 100%;<br /> padding-top: 133.3333%;<br /> position: relative;<br /> }<br /> .a-6-4,.a-3-2{<br /> width: 100%;<br /> padding-top: 66.6666%;<br /> position: relative;<br /> }<br /> .a-4-6,.a-2-3{<br /> width: 100%;<br /> padding-top: 150%;<br /> position: relative;<br /> }<br /> .a-9-4{<br /> width: 100%;<br /> padding-top: 44.4444%;<br /> position: relative;<br /> }<br /> .a-divina{<br /> width: 100%;<br /> padding-top: 76.4%;/* proportio divina */<br /> position: relative;<br /> }<br /> .a-12-4, .a-6-2, .a-3-1{<br /> width: 100%;<br /> padding-top: 33.3333%;<br /> position: relative;<br /> }<br /> <br /> /* other common ratios */<br /> .a-1-1{<br /> width: 100%;<br /> padding-top: 100%; /* Square */<br /> position: relative;<br /> /* background: pink; */<br /> }<br /> .a-2-1{<br /> width: 100%;<br /> padding-top: 50%; /* Square */<br /> position: relative;<br /> }<br /> .a-1-2{<br /> width: 100%;<br /> padding-top: 200%; /* Square */<br /> position: relative;<br /> }<br /> <br /> .a-4-3{<br /> width: 100%;<br /> padding-top: 75%; /* 4:3 Aspect Ratio */<br /> position: relative;<br /> }<br /> <br /> .aspect-8-5{<br /> width: 100%;<br /> padding-top: 62.5%; /* 8:5 Aspect Ratio */<br /> position: relative;<br /> }<br /> <br /> .a-16-9{<br /> width: 100%;<br /> padding-top: 38.2%; /* 16:9 Aspect Ratio */<br /> position: relative;<br /> }<br /> .a-9-16{<br /> width: 100%;<br /> padding-top: 177.7778%; /* 9:16 Aspect Ratio */<br /> position: relative;<br /> }<br /> <br /> &lt;/syntaxhighlight&gt;<br /> <br /> Es bietet sich an mit den stretch Klassen zu arbeiten (siehe CSS - Helper)</div>

Steff