Responsive: 3 flüssige Bilder nebeneinander

[pusher23]

Hallo zusammen,

mein Problem klingt wahrscheinlich relativ einfach, jedoch will und will es mir einfach nicht gelingen es zu lösen.

3 Bilder in horizontaler Reihe sollen sich verkleinern wenn das Browserfenster zu eng wird - und nicht wie ich es jetzt habe - runter rutschen. Die Bilder sollen immer in einer Reihe stehen bleiben.



Folgendes habe ich erfolglos probiert:

Bilder mit Prozentwerten

div#wrapper
{
    width:100%;
    max-height:169px;
}
img.box-01
{
    width:30%;
    margin-right:20px;
}
img.box-02
{
    width:30%;
    margin-right:20px;
}
img.box-03
{
    width:30%;
}

bzw. Bilder mit Maximal-Breiten

div#wrapper
{
    width:100%;
    max-height:169px;
}
img.box-01
{
    max-width:180px;
    margin-right:20px;
}
img.box-02
{
    max-width:180px;
    margin-right:20px;
}
img.box-03
{
    max-width:180px;
}

bzw. 3 Div's mit Bildern darin welche 100% Breite bekommen

div#wrapper
{
    width:100%;
    max-height:169px;
}
div#box-01
{
    max-width:180px;
    max-height:169px;
}
img.box-01
{
    width:100%;
    height:auto;
}
div#box-02
{
    max-width:180px;
    max-height:169px;
}
img.box-02
{
    width:100%;
    height:auto;
}
div#box-03
{
    max-width:180px;
    max-height:169px;
}
img.box-03
{
    width:100%;
    height:auto;
}

Das Ergebnis war jeweils dass das rechte Bild runter rutscht anstatt dass sich die Bilder in ihrer Breite und proportional in ihrer Höhe verkleinern.
Für den Ein- oder Anderen mag das ein Kinderspiel sein - aber ich komm einfach nicht dahinter wie ich es machen muss und probiere hier schon sehr lange herum. :'(
Irgendwas übersehe ich scheinbar...

Vielen Dank für jegliche Hilfe!

 

[cebito]

AW: Responsive: 3 flüssige Bilder nebeneinander

20px sind nunmal irgendwann mehr als 5%, warum also nicht eine Prozentangabe? So bleibt der Abstand zwischen den Bildern auch proportional gleich zu ihrer Größe.

 

[pusher23]

AW: Responsive: 3 flüssige Bilder nebeneinander

Hi cebito,
danke für deine Hilfe.

Hast natürlich Recht, 20px sind irgendwann mehr.
Ich hab margin auf 5% umgestellt, nun klappt es.

Vielen Dank hast mir echt weitergeholfen!