henne
Goto Top

Image skalieren mit einer Regel

Hallo Freunde,

ich möchte diverse Bilder die verschieden groß und Seitenverhältnisse haben mit 2 Regeln via CSS anzeigen lassen (OnlineShop).
width soll generell 500px haben. sollte aber ein image height > 800px haben, dann max-height 800px.
Aber die erste Regel würde dann das Seitenverhältnis verzerren.

Wie könnte man das lösen?

Gruß Henne

Content-Key: 174499

Url: https://administrator.de/contentid/174499

Printed on: April 19, 2024 at 14:04 o'clock

Member: Petrof
Petrof Oct 11, 2011 at 17:16:18 (UTC)
Goto Top
Moin,

genau wie Du es schreibst:

width: 500px;
max-height: 800px;

Mit "overflow" und dem entsprechendem Wert kannst Du dann bestimmen, was mit dem Rest passiert, wenn höher als 800px

da wird nichts verzerrt.


Gruß
Peter
Member: Henne
Henne Oct 11, 2011 at 17:58:06 (UTC)
Goto Top
Hi, ich hab jetzt in der style.css:
{ width:500px; max-height:800px; overflow:hidden; }
Es wird trotzdem in die Breite von 500px verzerrt.

Wo denke ich falsch?

Gruß
Member: Arano
Arano Oct 11, 2011 at 18:53:12 (UTC)
Goto Top
Hallo

  1. Mit CSS kannst du doch eh nicht prüfen ob das Bild nun im Hochformat oder Querformat vorliegt, das muss doch schon vorher geschehen (z.B. PHP)
  2. Wenn du sowohl bei Hoch- als auch bei Querformat vorgibst das die Breite immer 500px sein soll, dann werden die beiden Formate - im Vergleich zu einander - in unterschiedlichen Größen dargestellt. Meiner Meinung nach wäre es da besser die längeren Seite beider Formate eine Größe zuzuweisen


~Arano
Member: Petrof
Petrof Oct 11, 2011 at 22:00:54 (UTC)
Goto Top
Klar wird es in der Breite "verzerrt", wenn die Quellgrafik schmaler oder breiter ist als 500px.

Aber Du wolltest doch eine generelle Breite von 500px haben.

Peter
Member: Henne
Henne Oct 12, 2011 at 19:20:34 (UTC)
Goto Top
Ja, so isses,
entweder 500px Breite,
wenn bildheight >800px..dann maxheight ohne zu verzerren

via CSS ist das wohl nicht machbar gerade wenn die pics
kleiner sind als die Regeln.

Henne