Anzeige

Responsive: 3 flüssige Bilder nebeneinander

Responsive: 3 flüssige Bilder nebeneinander | PSD-Tutorials.de

Erstellt von pusher23, 10.12.2013.

  1. pusher23

    pusher23 Noch nicht viel geschrieben

    Dabei seit:
    26.09.2009
    Beiträge:
    33
    Geschlecht:
    männlich
    Responsive: 3 flüssige Bilder nebeneinander
    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.

    [​IMG]

    Folgendes habe ich erfolglos probiert:

    Bilder mit Prozentwerten
    HTML:
    1.  
    2. div#wrapper
    3. {
    4.     width:100%;
    5.     max-height:169px;
    6. }
    7. img.box-01
    8. {
    9.     width:30%;
    10.     margin-right:20px;
    11. }
    12. img.box-02
    13. {
    14.     width:30%;
    15.     margin-right:20px;
    16. }
    17. img.box-03
    18. {
    19.     width:30%;
    20. }
    21.  
    bzw. Bilder mit Maximal-Breiten

    HTML:
    1.  
    2. div#wrapper
    3. {
    4.     width:100%;
    5.     max-height:169px;
    6. }
    7. img.box-01
    8. {
    9.     max-width:180px;
    10.     margin-right:20px;
    11. }
    12. img.box-02
    13. {
    14.     max-width:180px;
    15.     margin-right:20px;
    16. }
    17. img.box-03
    18. {
    19.     max-width:180px;
    20. }
    21.  
    bzw. 3 Div's mit Bildern darin welche 100% Breite bekommen

    HTML:
    1.  
    2. div#wrapper
    3. {
    4.     width:100%;
    5.     max-height:169px;
    6. }
    7. div#box-01
    8. {
    9.     max-width:180px;
    10.     max-height:169px;
    11. }
    12. img.box-01
    13. {
    14.     width:100%;
    15.     height:auto;
    16. }
    17. div#box-02
    18. {
    19.     max-width:180px;
    20.     max-height:169px;
    21. }
    22. img.box-02
    23. {
    24.     width:100%;
    25.     height:auto;
    26. }
    27. div#box-03
    28. {
    29.     max-width:180px;
    30.     max-height:169px;
    31. }
    32. img.box-03
    33. {
    34.     width:100%;
    35.     height:auto;
    36. }
    37.  
    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!
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Responsive: 3 flüssige Bilder nebeneinander
    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.
     
    #2      
  3. pusher23

    pusher23 Noch nicht viel geschrieben

    Dabei seit:
    26.09.2009
    Beiträge:
    33
    Geschlecht:
    männlich
    Responsive: 3 flüssige Bilder nebeneinander
    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!
     
    #3      
x
×
×