Bild wird zum Dehnen eines

Question

Wie bekomme ich ein Bild, um die Höhe einer DIV Klasse zu strecken?

Derzeit sieht es wie folgt aus:

http://i36.tinypic.com/34osrdg.png

Allerdings würde ich die DIV gerne gestreckt so dass das Bild richtig passt, aber ich will nicht, um das Bild zu ändern. Hier

ist die CSS für das DIV (die graue Box):

.product1 { 
    width: 100%; 
    padding: 5px; 
    margin: 0px 0px 15px -5px; 
    background: #ADA19A; 
    color: #000000; 
    min-height: 100px; 
} 

Die CSS auf das Bild angewendet wird:

.product{ 
    display: inline; 
    float: left; 
} 

Also, wie kann ich dieses Problem beheben?

Answer 1

hinzufügen overflow:auto; zu .product1

Answer 2

display:inline 
float:left 

ist Ihr Problem

Schwimmdock macht die Eltern Breite nicht durch das Kind gestreckt werden, versuchen, ohne den Schwimmer das Bild platzieren. Wenn Sie den Schwimmer ausschalten, sollte er Ihnen den gewünschten Effekt geben.
Ein anderer Ansatz wäre, sicherzustellen, dass Sie Ihre Floats am Ende des übergeordneten Elements löschen, so dass sie nicht zum Kriechen neigen.

Aktualisierung: Nach dem Anzeigen Ihres Links Ihr Höhenproblem wie angezeigt, ist, weil die Floats nicht gelöscht werden.

Answer 3

Fügen Sie im Markup nach dem Bild etwas wie <div style="clear:left"/> ein. Ein bisschen chaotisch, aber es ist der einfachste Weg, den ich gefunden habe.

Und während Sie dabei sind, legen Sie ein wenig Marge auf das Bild, so dass der Text nicht dagegen stößt.

Answer 4

@John Millikin Unter der Annahme korrekt ist, wird der Code

.product + * { clear: left; } 

ausreichen würde, das Gleiche zu tun, ohne dass Sie manuell den Code nach dem div einzustellen.

Answer 5

Ein Trick, den Sie ist die <div> ‚s Überlauf-Eigenschaft auf versteckte festlegen können. Dies zwingt Browser, die physische Größe der Box zu berechnen, und behebt das seltsame Überlappungsproblem mit dem schwebenden Bild. Es erspart Ihnen, zusätzliches HTML-Markup hinzuzufügen.

Hier ist, wie die Klasse aussehen sollte:

.product1 { 
    width: 100%; 
    padding: 5px; 
    margin: 0px 0px 15px -5px; 
    background: #ADA19A; 
    color: #000000; 
    min-height: 100px; 
    overflow: hidden; 
} 

Answer 6

Das sieht wie ein Job für clearfix mir ...

Answer 7

Versuchen Sie Folgendes:

.Strech 
{ 
    background:url(image.jpg); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 

    width:500px; 
    height:500px; 
}