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

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

  1. Hallo Kai,

    versuchs mit dem hier:

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

    gruesse qx

    1. 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

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

    img {  
     max-width: 45%;  
    max-height: 100px;  
    }
    
  3. 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

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. 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

      1. 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.....

        1. Meine Herren!

          ICH hab, danke.....

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

          --
          “All right, then, I'll go to hell.” – Huck Finn