Das Bild ist nicht in der Box

Question

Ich habe ein Problem, wenn ich ein Bild in eine Box gesetzt habe, aber wenn ich das Programm ausführen, sehe ich, dass die Box das Bild nicht enthält.

Ich habe versucht, es zu beheben und erkannte, dass, wenn ich das align = "left" Attribut herausnehmen das Problem verschwindet.

Ich verstehe nicht, warum das passiert oder wie man es vermeidet, wenn jemand es erklären könnte, das wäre großartig.

Sie sehen das Ergebnis kann here

div.body { 
 
    background-color: blue; 
 
    padding: 15px; 
 
    height: auto; 
 
}

<div class="body"> 
 
    <img id="full" src="../Photos/controler.png" alt="altvalue" hspace="15" usemap="imgmap" align="left" /> 
 
</div>

Answer 1

Sie brauchen (max-)width:100% in img zu setzen, und verwenden Sie keine HTML-align noch hspace, sie sind veraltet.

Wenn Sie align=left verwenden (verwendet heute in CSS als float:left) das Element aus normalen DOM Fluss nehmen, und auf der linken Seite des Containers platziert, mit diesem Inhalt wickeln wird rund um die „schwebte“ Element

div.body { 
 
    background-color: blue; 
 
    padding: 15px; 
 
    height: auto; 
 
} 
 
#full { 
 
    width: 100% /* or max-width */ 
 
}

<div class="body"> 
 
    <img id="full" src="//lorempixel.com/1000/1000" alt="altvalue" usemap="imgmap" /> 
 
</div>

Answer 2

Verwenden overflow:hidden in Ihrem div:

div.body 
 
{ 
 
\t background-color:blue; 
 
\t padding:15px; 
 
\t height:auto; 
 
     overflow:hidden; 
 

 
}

<div class = "body"> \t 
 
    <img id = "full" src = "../Photos/controler.png" alt = "altvalue" hspace = "15" usemap = "imgmap" align = "left"/> 
 
</div>

Answer 3

Unter der Annahme, dass Sie align haben müssen = „left“ in dort aus irgendwelchen Gründen, die sein können, können Sie „klar“ die Behälter Eltern von width:100%; overflow:auto;

div.body { 
    background-color:blue; 
    padding:15px; 
    height:auto; 
    width:100%; 
    overflow:auto; 
} 

Answer 4

das Schwimmerelement immer Zugabe zerstören sein Kindelement height. So ist die bessere Lösung overflow:hidden verwenden oder verwenden clearfix Hack sehen What is clearfix? und here