Frage Höhe eines Bildes - elegant lösen

[vidose]

Hallo!
Ich möchte, dass die Bilder eine Höhe von bspw. 200 Pixeln haben, dabei soll sich jedoch automatisch die Breite anpassen, sodass das Bild nicht verzogen oder verzerrt aussieht. Wisst ihr wie sowas funktionieren kann?
Mfg viodse

 

[MrMurphy]

Hallo

Du gibt den Bildern eine Höhe (height) von 200px im CSS und als Höchstbreite (max-width) von 100% .

Insgesamt könnte die CSS-Anweisung folgendermaßen aussehen:

      img {
         display: block;
         max-width: 100%;
         height: 200px;
         border: 0;
      }

Gruss

MrMurphy

 

[vidose]

@MrMurphy

So?

<img style="height:200px; max-width: 100%"  src="">

Funktioniert nicht:/ Das Bild bleibt verzogen :/

 

[djheke]

Sollte/muss funktionieren.

 

[MrMurphy]

Hallo

Stimmt, da lag ich falsch. Für eine feste Höhe dürfen nur width und height angegeben werden, weder max-width noch max-height:

      img {
         width: auto;
         height: 200px;
      }

Andere Angaben wie border oder display sind natürlich zusätzlich möglich.

Gruss

MrMurphy

 

[djheke]

Besser ist die Bilder entsprechend zu Skalieren.

 

[Tronjer]

Bei einem responsiven Layout sollte sich die Höhe der Breite anpassen und nicht umgekehrt. Also etwas à la:
width: 100%;
max-width: /* pixel-width des Bildes*/;
height: auto;