Obtention d'une image pour étirer une div

Question

Comment puis-je obtenir une image pour étirer la hauteur d'une classe DIV?

il ressemble actuellement à ceci:

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

Cependant, je voudrais la DIV à étirer afin que l'image est bien ajusté, mais je ne veux pas redimensionner l'image.

Voici le CSS pour la DIV (la boîte grise):

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

Le CSS appliqué sur l'image:

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

Alors, comment puis-je résoudre ce problème?

Answer 1

Ajouter overflow:auto; à .product1

Answer 2

display:inline 
float:left 

est votre problème

flottant fait que les parents largeur ne pas être étirées par l'enfant, essayez de placer l'image sans le flotteur. Si vous retirez le flotteur, cela devrait vous donner l'effet désiré.
Une autre approche consisterait à vous assurer que vous effacez vos flottants à la fin de l'élément parent de sorte qu'ils ne s'étendent pas au fluage. Après avoir visualisé votre lien Votre problème de hauteur, tel qu'affiché, est dû au fait que les flottants ne sont pas effacés.

Answer 3

Dans le balisage après l'image, insérez quelque chose comme <div style="clear:left"/>. Un peu brouillon, mais c'est la façon la plus simple que j'ai trouvée.

Et pendant que vous y êtes, placez un peu de marge sur cette image afin que le texte ne s'y écrase pas.

Answer 4

En supposant @John Millikin est correct, le code

.product + * { clear: left; } 

suffirait à faire la même chose sans vous forcer à régler manuellement le code après la div.

Answer 5

Une astuce que vous pouvez utiliser est de définir la propriété de débordement de <div> à caché. Cela force les navigateurs à calculer la taille physique de la boîte, et corrige le problème de chevauchement étrange avec l'image flottante. Cela vous évitera d'ajouter des balisages HTML supplémentaires.

Voilà comment la classe devrait ressembler à:

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

Answer 6

Cela ressemble à un emploi pour me clearfix ...

Answer 7

les opérations suivantes:

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

    width:500px; 
    height:500px; 
}