Antworten auf deine Fragen:
Neues Thema erstellen

Responsive: 3 flüssige Bilder nebeneinander

pusher23

Noch nicht viel geschrieben

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
HTML:
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

HTML:
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

HTML:
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

undefined

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

Noch nicht viel geschrieben

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!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben