Img in Fieldset Problem

[<Hotte>]

Hallo!

Ich habe 3 Fieldsets nebeneinander, welche in einem Wrapper-<div> Container liegen.
Die Fieldsets haben je 33% Breite.
In diesen Fieldsets möchte ich nun ein Bild platzieren. Das Bild darf maximal so breit sein, wie das Fieldset.
(Also 100% vom Fieldset bzw 33% vom Wrapper-div)

Leider "verbreitert" das Bild mein Fieldset über die erlaubten 33%.
Wie bekomme ich das Bild dazu, dass es sich an die gewünschten 33% Breite anpasst?


Hier der Code:
http://codepen.io/anon/pen/MwaRwj

[kaminbausatz]

gib dem img ein width:100%;
dem fieldset ein:
padding:0px;
box-sizing:border-box;

[<Hotte>]

Vielen Dank! Genau so habe ich mir das vorgestellt.
Nur jetzt habe ich leider das Problem, dass das Bild verzerrt wird, falls es zu hoch ist. (Das Bild wird dynamisch geladen)

http://codepen.io/maikell/pen/LVpvzg


Kann man das mit CSS lösen, dass beides geht?

[kaminbausatz]

img {
  height:50px;
  display: block;
  margin:  auto auto;
}

[<Hotte>]

Super! 1000 Dank!

[Blar]

Hätte auch einfach nur gereicht, die width: 100% vom <fieldset> zu entfernen, da dieser noch ein padding und margin drauf hatte.

http://codepen.io/anon/pen/qdZXbX

[Blar]

Wenn du für deine Bilder einem Rahmen brauchst in dem vielleicht noch eine Beschreibung oder Titel steht, solltest du besser <figure> und <figcaption> verwenden.

[kaminbausatz]

Hätte auch einfach nur gereicht, die width: 100% vom <fieldset> zu entfernen, da dieser noch ein padding und margin drauf hatte.

http://codepen.io/anon/pen/qdZXbX

Schau es Dir mal im FF an...