AW: Bilder dynamisch mit der restlichen Seite skalieren
ok, ich glaube ich hab's
ich möchte zunächst anmerken, dass ich mich noch nicht eingehend mit css3-columns auseinandergesetzt habe – aus dem einfachen grund, dass zur zeit meines wissens nach nur ff (prefix), sarari (prefix) und chrome (prefix) dieses modul unterstützen und es daher für die produktion noch nicht geeignet erscheint.
das column-modul bietet 2 möglichkeiten, spalten zu definieren:
> (prefix)column-count: [int]
> (prefix)column-width: [auto|int|percent]
ich habe unterschiedliche markups getestet (chrome 21, ff 14, safari 5.1):
variante mA)
HTML:
<div id="testee-container">
<img src="media/images/test.jpg" alt="">
<p>Lorem ipsum... [gekürzt] ...dui.</p>
</div><!-- /end testee-container -->
variante mB)
HTML:
<div id="testee-container">
<p><img src="media/images/test.jpg" alt="">Lorem ipsum... [gekürzt] ...dui.</p>
</div><!-- /end testee-container -->
die 2 getesteten css-möglichkeiten:
variante cA)
Code:
#testee-container {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
}
variante cB)
Code:
#testee-container {
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
column-gap: 24px;
}
die css-angaben für die darstellung des bildes sind immer gleich (höhendefinitionen aus faulheit weggelassen):
Code:
#testee-container img {
display: block;
max-width: 100%;
width: auto;
}
ein kurzer test mit sowohl der einen als auch der anderen möglichkeit brachte mich zum folgenden ergebnis:
1) es genügt vollkommen, die anzahl an spalten auf dem elternelement des <p>-tags zu setzen, sowohl für die funktionalität der teilung des textuellen inhaltes in spalten als auch das behandeln von bildern (motto: "stelle bilder, sofern nicht explizit anders angegeben, in einer [der] spalte[n] dar").
2) die größe des bildes, sofern wie von mir in einem vorhergehenden post beschrieben, nimmt bei 100% die breite einer spalte ein. das bild muss als block-element deklariert werden (standard: inline-element). wird die spalte größer als die kantenlänge des bildes, wird das bild wie erwartet nicht vergrößert.
3) das zuweisen der eigenschaft "-webkit-user-select: none" hat für das verhalten des bildes innerhalb der darstellung keinerlei auswirkung. wie in meinem verhergehenden post beschrieben, dient das nur dazu, bestimmte elemente von einer möglichen selektion auszuschließen.
folgende ergebnisse bekam ich durch verändern des oben beschriebenen markups. fett ausgezeichnet sind die bezüge zu dem jeweiligen markup:
4)
{mA} sofern das bild am anfang/ende der spalten sitzt, wird es auch genau dort dargestellt.
{mB}falls das bild an einer anderen stelle des absatzes steht, ist es nicht möglich zu steuern, in welcher der spalten das bild dargestellt wird. weiterhin ist es nicht möglich, das bild über 2 spalten laufen zu lassen, sofern es innerhalb des <p>-tags gesetzt wird.
{mA}wird das bild seitens des markups VOR oder HINTER dem <p>-tag definiert, stellt der browser es als teil einer spalte dar (sofern nicht anders definiert – derzeit scheint [prefix]column-span nur in safari (prefix) und chrome (prefix) und mit dem wert "all" zu funktionieren. firefox beachtet die angabe trotz prefix nicht).
ich hoffe, das war erhellend für dich.
gruß
).
