IMG, Breit ein Prozent, Höhe Maximal 100 Pixel

[Kai]

Ich möchte ein Bild per img formatieren und ausgeben. Es soll immer eine Höhe von 100 Pixel haben, wenn es höher als 100 Pixel ist, soll es einfach nicht angezeigt werden.

img{
width:45%;
height:100px;
}

Jetzt habe ich zwar die Breite, und die Höhe, aber die Höhe wird getreckt, bzw. gedehnt uf 100 Pixel. Wenn ich es so mache:

img{
width:45%;
}

stimmen die Masse, aber ich möchte die Höhe eben auf 100 Pixel beschränken.

Kai

[Quincunx]

Hallo Kai,

versuchs mit dem hier:

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

gruesse qx

[Kai]

img {
max-width: 45%;
max-height: 100px;
}

Hier richtet er sich ja nach der Höhe, also 100 PX und dann die 45 Prozent

so ist das Bild verzert

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

Auch hier richtet er sich nach der Höhe und gibt dann die Breite je nach dem Aus.

Ich möchte das er das Bild 45% Breit macht, die Höhe dann prozentual nach der Breite ausgibt aber bei 100 Pixel abgeschnitten wird

[Alex]

img{
width:45%;
height:100px;
}

img {  
 max-width: 45%;  
max-height: 100px;  
}

[ChrisB]

Hi,

Wenn ich es so mache:

img{
width:45%;
}

stimmen die Masse, aber ich möchte die Höhe eben auf 100 Pixel beschränken.

Dann packst du es am besten in ein Container-Element mit einer max-height von 100% und overflow:hidden.

Und wenn du nicht den oberen Teil des Bildes sehen und den unteren abgeschnitten haben willst – dann wäre es ein Fall für absolute Positionierung innerhalb dieses Containers.

MfG ChrisB

[Kai]

Dann packst du es am besten in ein Container-Element mit einer max-height von 100% und overflow:hidden.

Also hie rist mein Versuch, der leider kläglich gescheitert ist:

http://www.cssdesk.com/avvey

Kai

[Kai]

Dann packst du es am besten in ein Container-Element mit einer max-height von 100% und overflow:hidden.

Also hie rist mein Versuch, der leider kläglich gescheitert ist:

http://www.cssdesk.com/avvey

Kai

ICH hab, danke.....

[1UnitedPower]

Meine Herren!

ICH hab, danke.....

Es ist in Foren immer hilfreich die Lösung zu zeigen ;)