[ex³]

Ich lasse um meinen Text einen float div Layer mit einem Bild, einem Link und einer Beschreibung vorbeifließen... klickt man auf das Thumbnail landet man bei dem großen Bild also nicht Aufregendes.

Da ich alles schön skalierbar mit em mache ist mir gekommen das man ja auch Bilder mit em skalieren kann. Also wenn ich die Schrift vergrößere, vergrößert sich auch das Bild (irgendwo auf einer Bund Seite mal gesehen)

Das mit em ist mir schon klar aber wie funktioniert das, das bei der Standard Schriftgröße das Bild die Original Größe hat und wenn ich vergrößere das Bild proportional vergrößert wird? Natürlich sollte beim Rückskalieren das Bild wieder auf Normalgröße schrumpfen.

Kann das sein das ich im Body ne default Größe einstellen muss damit jeder Browser em gleich interpretiert?

Wäre gut wenn jemand da ein Rat hätte.

[Waq]

Das dürfte nicht gehen... vielleicht über JS, wenn man da die aktuelle em-grösse auslesen kann.
Was Du machen kannst, ist von einer "durchschnittlichen" Schriftgrösse auszugehen (z.B. 14pt), und ausrechnen, dass das Bild durchschnittlich zehn Zeilen hoch ist, dann machst Du 10 em Höhe und die breite Proportional zum Seitenverhältnis.

[Jann Hendrik]

die einzige Möglichkeit die mir einfällt ist das es nicht frei skalierbar ist, sondern über eine Navigation läuft, bei der zB 3 versch. Schriftgößen auswählbar sind. In Abhängigkeit davon dann auch die Bilder skaliert werden...

wobei das nicht das ist, was du vorhast, wenn ich dich richtig verstanden habe.

[ex³]

nun ja ich hab jetzt jedem Bild nen Breite von 6.5 em gegeben und ner automatischen Höhe. die Container drumherum sind alle ein bisschen größer und die Font-Size der Bildbeschreibung ist kleiner. Jetzt ist das mit dem skalieren ganz ok. Das ganze klappt so ganz gut nur mit css.

[WarrenFaith]

Haste da mal ein kleines Beispiel online?

[schifti]

Tip

Laut dem Buch "Barrierefreie Webdesign", sollen die Angaben dann in % erfolgen, wobei zu beachten ist, das die Angabe sich beim Bild auf den Container bezieht in dem sich das Bild befindet (Inline).
Jedoch, sieht jedes skalierte Bild wahrscheinlich verzehrt aus.
Als Angabe ist em aber auch erlaubt.

W3C hat hierfür die Richtlinie SVG rausgegeben (da kann ich dir auch nicht mehr dazu sagen)

[ex³]

Hier ist der CSS Code ist nur auf die Schnelle gemacht. Die Thumbs werden ein bisschen verzerrt. Ist aber alles frei skalierbar.

<div class="contentimg right">
<a href="gross.png"><img style="width: 6.5em; height: auto;" src="thumb.png"></a>
<p>Beschreibung<p>
</div>

<style>

.contentimg {
background-color: grey;
text-align: center;
padding: 0.5em;
margin: 0.6em;
width: 7em;
}

.contentimg img {
border: none;
}

.left {
float: left;
}

.contentimg p {
margin: 0 auto;
padding: 0;
font-size: 0.8em;
width: 7em;
}

.right {
float: right;
}
</style>

[$traight-$hoota]

Zitat von schifti

W3C hat hierfür die Richtlinie SVG rausgegeben (da kann ich dir auch nicht mehr dazu sagen)

Scalable Vector Graphics sind XML basierte Vektorgrafiken, die sich auf ne beliebige größe skalieren lassen. für bilder aber gänzlich ungeeignet.

Wenn du verschiedene Schriftgrößen zur Auswahl hast, wäre es denkbar 3 verschiedene Bilder zu verwenden, wobei die Bilder vorgeladen werden können (einfach mit JavaScript ein neues Image Objekt erzeugen und das src Attribut auf das Bild setzen. mit ImageObjekt.complete kannst du checken ob die Grafik vollständig geladen ist.).

[PaterNoster]

Auch wenn es nicht genau das ist was Du suchst

http://alistapart.com/articles/magazinelayout

könnte der Lösungsansatz - vor allem was die Berechnungen angeht - doch interessant sein

[$traight-$hoota]

Zitat von PaterNoster

Auch wenn es nicht genau das ist was Du suchst

http://alistapart.com/articles/magazinelayout

könnte der Lösungsansatz - vor allem was die Berechnungen angeht - doch interessant sein

das layout is schon geil, aber imo soll das ganze clientseitig gelöst werden.