Bilder mit em werten - fehler?

[Loon3y]

Hallo,

habe gerade einen komischen Fehler irgendwie..

Normal sagt man ja, wenn man eine box mit 120px width hat und eine schriftgröße von 12, dann ist die box 10em widht.

Gilt das selbige auch für bilder oder muss man da irgendwie umdenken?

Ich habe einen Banner der 850px x 150px ist. Wenn ich die werte durch 12 teile und sie als em schreibe, ist der banner rießig....überdimensional. Jetzt habe ich solange "rumgefuscht" bis der banner ca seine größe hat und siehe da...der wert ist ca 25,xxxxxxx zum umbrechen. Wie kann das möglich sein? Wie muss ich da vorgehen?

Grüßle und Dank
Loon3y

Edit: kann das was mit h1, h2 usw zu tun? wenn ja, wie groß ist die schriftgröße von h1 standardmäßig und von h2?

 

[threadi]

em ist eine relationale Größenangabe die abhängig von der Schriftgröße des umgebenden Elements ist. Siehe auch: SELFHTML: Navigationshilfen / Kurzreferenz: CSS

D.h. wenn du folgenden HTML-Code hast:

<p>Das ist Text 1, <a href="#">und hier ein Link</a></p>

würde bei folgendem CSS-Code der Link vergrößert dargestellt werden:

p { font-size: 10px; }
p a { font-size: 1.2em; }

Würde hingegeben

p { font-size: 1.2em; }
p a { font-size: 1em; }

wäre diese Größe abhängig von dem was um das p herum als Schriftgröße angegeben wurde. Einfach eine Umrechnung a la 12px = 10em ist daher nicht möglich.

 

[Loon3y]

wäre diese Größe abhängig von dem was um das p herum als Schriftgröße angegeben wurde. Einfach eine Umrechnung a la 12px = 10em ist daher nicht möglich.

ja das war mir soweit klar....habe mich wohl etwas fälschlich ausgedrückt. Es gibt ja sicherlich standardwerte für h1 - h6 die vordefiniert sind. Sind diese in allen browsern gleich groß ? Und wenn ja, wie groß?

 

[threadi]

Nein, die Vorgabewerte für h1, h2 usw. sind in jedem Browser anders.

 

[prm]

Der Umrechnungsfaktor ist 16 statt 12:
Pixel in EM umrechnen* | Calculator.Tobani.com

 

[threadi]

:roll: Hast du auch das gelesen was drunter steht?

Dies ist nur ein Richtwert, da EM eine relative Maßangabe ist, die von der Schriftgröße abhängt.

 

[prm]

Stimmt. Aber in dem weiteren Link auf der angegebenen Seite steht auch, dass die Standard-Browser-Schriftgröße bei 16px liegt.
Allerdings: Wenn die individuell abgeändert ist, passt es auch nicht mehr.
Folge: Die Größe kann je nach Browserwinstellung unterschiedlich sein.

 

[Loon3y]

Wie wäre es dann möglich, dass man einen Header, welcher in <h1> ist und vllt eine überschrift in form einer graifk oder in <h2> - <h6> mit em an der eingestellten schriftgröße im browser anpasst? Sprich das sich die bilder mit vergrößern ? Müssteman dann feste werte für h1 - h6 vergeben ? (sofern man auch bis h6 immer bilder mit rein macht als hintergrund).

 

[prm]

Hintergrundgrafiken lassen sich nicht skalieren.
Wenn sich der Div, der sie enthält vergrößert, bleiben sie dennoch so groß wie sie sind.

 

[Loon3y]

Hintergrundgrafiken lassen sich nicht skalieren.
Wenn sich der Div, der sie enthält vergrößert, bleiben sie dennoch so groß wie sie sind.

nix mit hintergrundbild...nix mit div...ein header ist eine überschrift, überschrift ist <h1> - <h6>.

html:

<h1> <a href="http://www.xyz.de"> <img src="banner.png" width="850" height="150" alt="ich bin der banner von bla bla bla" /> </a> </h1>

css:

h1 { text-align:center; [B]width: ...em; height: ...em; }[/B]

gruß....

 

[neuroleptika]

Na dann:
Ein img ist ein img

Wenn es genau in <h1> passen soll gebe die gleichen em-Abmessungen wie für h1 an.
welche font-size hat den <a>?

Solche Skalierungen sehen nicht schön aus

 

[Loon3y]

Na dann:
Ein img ist ein img

Wenn es genau in <h1> passen soll gebe die gleichen em-Abmessungen wie für h1 an.
welche font-size hat den <a>?

Solche Skalierungen sehen nicht schön aus

<a> hat 0.9em als font-size.
<h1> habe ich keinen wert zugeschrieben, das ist "vordefiniert". Müsste ich wohl einen wert noch zu weisen...pag eist ja noch nicht so weit.

habe gerade gesehen das ich einen fehler in dem geposteten code habe.

der css code sieht so aus:

h1 { text-align: center; }
h1 img { [B]width: ..em; height: ..em; }[/B]

müsste ich jetzt sagen wir mal h1 einen wert von "font-size:1.2em;" geben und dann mit 16 die px werte umrechnen?

 

[Junny]

Wie wäre es dann möglich, dass man einen Header, welcher in <h1> ist und vllt eine überschrift in form einer graifk oder in <h2> - <h6> mit em an der eingestellten schriftgröße im browser anpasst? Sprich das sich die bilder mit vergrößern ?

Als eingestellte Schriftgröße verstehe ich jetzt mal die für normalen Fließtext eingestellte Schriftgröße.
Angenommen, das Bild ist in einem Link in einer Überschrift x. Grads im Body. Dann sähe das so aus:

body {
  font-size: 100.01%; /* Gegen Browserfehler */
}
hx {
  [B]font-size: 1em;[/B] /* Relativ zum Elternelement, also hier: So groß wie Fließtext */
}
    hx a img {
      width: 10em;
      height: 10em;
    }

Entscheidend ist hier wohl das Verständnis, was die Schriftgrößenangabe in em für Überschriften bewirkt: Es bedeutet, dass der Text in der Überschrift x-mal so groß dargestellt wird wie im Elternelement.

Gruß
Junny

 

[Efchen]

Entscheidend ist hier wohl das Verständnis, was die Schriftgrößenangabe in em für Überschriften bewirkt: Es bedeutet, dass der Text in der Überschrift x-mal so groß dargestellt wird wie im Elternelement.

Das hat nichts mit Überschriften zu tun, das gilt für jedes Element.

Es ist für Einsteiger häufig nur verwirrend, dass wenn man einem Element die Schriftgröße 1.5em gibt, sich bei Größenangaben für Elemente in dem Element 1em natürlich auf die Schriftgröße 1.5em bezieht, nicht auf die 1em des sonstigen Fließtextes.
Auftreten tut das normalerweise in Überschriften, weil da die Schriftgröße oft verändert wird.