CSS Box-Höhe soll sich am am Bild darin orientieren

[thruem]

Hi,

weiss grad nicht nach welchem Stichwort ich recherchieren soll...

Das Problem, das ich lösen will sieht so aus:http://img259.imageshack.us/img259/7180/bildschirmfoto20130504u.png

Die blaue Box soll so hoch sein, wie das linke Bild, die grüne Box so hoch sein wie das rechte Bild.

Im Moment formatiere ich das IMG-Element per CSS so:

.bild_opener {
    max-width: 60%;
    float: left;
    margin-right: 5px;
}

Hat jemand einen Tipp?

 

[slaves]

Woher soll die Box denn wissen, wie lang sie sein soll, wenn keine festen Größen vorgegeben sind?

Ich würde das zusammengehörende Bild + Box in einen Wrapper packen. Das sollte das Problem lösen.

 

[thruem]

Die Box wird ja so groß, je nachdem wieviel Text sich darin befindet. Wieso dehnt sie sich nicht aus, d. h. orientiert sich an den Bild-Maßen?

Ich brauche prozentuale Größenangaben, d. h. im Moment habe ich ja nur eine Bild-Breite von 60% definiert, die Bild-Höhe wird ja dann automatisch angepasst.

Ist der Umgang mit Bildern in DIV-Boxen irgendwo gut beschrieben?

 

[slaves]

Ich würde einfach das "height" - Attribut des Bildes setzen. Das sollte man sowieso immer machen.
Der Grund wieso man immer eins von den beiden Attributen "width"/ "height" im <img>-Tag setzen sollte ist, dass der Browser schon bevor das Bild überhaupt geladen hat, den Platz dafür reserviert hat. Damit umgeht man das Problem des - ich formuliers mal so - "Rumspringen" des Seiteninhalts.

Hier noch ein kleines Beispiel: http://jsfiddle.net/ng3zc/

 

[QXARE]

@slaves: Damit das Bild sich der Breite im Verhältnis anpasst, darf keine Höhe gesetzt werden. Wenn du eine Höhe im height-Attribut setzt, reicht es aber nur die Zahl anzugeben (ohne px).


Setze entweder ein div mit clear: both am Ende des Wrapper Containers oder verwende die clearfix-Klasse um kein unnötiges Markup zu erzeugen.

Da dein Bild floatet, könnte dies die Lösung sein. Ansonsten wäre wie immer eine kleine Demo deines Problems nicht schlecht.

 

[unre4l]

probier mal:

.bild_opener {
    max-width: 60%;
    float: left;
    margin-right: 5px;
    overflow:hidden;
    }

funktioniert ähnlich wie ein clearfix und reicht in den meisten Fällen aus.

 

[omaliesschen]

overflow:hidden;

Funktioniert manchmal kann angeblich aber auch Probleme machen.

<br clear="all" /> gibts auch noch.

 

[Daaron]

Ich würde einfach das "height" - Attribut des Bildes setzen. Das sollte man sowieso immer machen.
Der Grund wieso man immer eins von den beiden Attributen "width"/ "height" im <img>-Tag setzen sollte ist, dass der Browser schon bevor das Bild überhaupt geladen hat, den Platz dafür reserviert hat.

Damit das Bild sofort korrekt vorgerendert wird braucht es beide Werte.... aber auch das ist nicht in Stein gemeißelt. Für so manches Layout ist es sinnvoll, die <img height/width> per CSS noch einmal zu überschreiben und z.B. Breite prozentual und Höhe auf auto zu setzen.

 

[thruem]

Hi,

danke für die Hinweise. Vielleicht klappts auch wegen Bootstrap nicht... Habe was zusammengestellt:
http://jsfiddle.net/vladd/A2s2N/

Ziel ist immer noch: Wenn man die Ansicht im jsfiddle verschiebt, dass die Bilder innerhalb der blauen + grünen Boxen bleiben.

 

[Daaron]

http://www.yaml.de/ sollte das Problem wohl lösen.

 

[unre4l]

#opener {
    background-color: #06e;
    overflow:hidden;
}

man muss overflow:hidden; natürlich dem parent geben.. hatte nicht gelesen, dass du img.bild_opener meinst.

 

[thruem]

Hab's auf im fiddle aktualisiert, sieht gut aus :-))) Super! Danke.

Werde es morgen in der Seite einbauen und dann nochmal berichten bzw. den Thread auf erledigt setzen...
Edit: Grad eingebaut, funktioniert. Danke.

"overflow: hidden;" hört sich an, als würde etwas abgeschnitten werden. Aber es wird nichts abgeschnitten oder "verborgen", richtig? Werde mir mir dann auch noch die Dokumentation dazu reinziehen. Ich sage nur RTFM ;-)

@Daaron Wo liegen die Stärken von YAML, wenn du es mit Twitter Bootstrap vergleichst? Im Moment bin ich etwas auf dem Bootstrap-Trip... aber ich lerne gerne etwas dazu.