CSS: Div Wrapping Bild

Question

Ich habe ein IMG-Element mit style='width:40%;height:40%;'. Ich möchte ein div hinzufügen, das es automatisch umschließt. Wenn ich jedoch das div einfüge, anstatt das img einzuschleifen, expandiert es einfach zum div inside.

Wie kann ich dieses div zwingen, img zu wickeln, damit es als ein Rahmen verwendet werden kann. Der Grund, warum ich die Höhe und Breite des DIV nicht voreinstelle, liegt darin, dass die Prozentzahlen von img dynamisch angegeben werden, also sollte div den img entsprechend den Größen von img umschließen.

Answer 1

Das Problem mit einer Breite und Höhe von 40% bei einem Image-Tag ist, dass das Bild nicht auf 40% seiner ursprünglichen Größe verkleinert wird, sondern 40% des übergeordneten Elements einnimmt, wie Sie here sehen können.

In Ihrem Fall möchten Sie das Bild in ein Div umbrechen, aber immer noch auf 40% seiner Elterngröße. In diesem Fall ist der Elternteil das Wrapping div. Du siehst das Problem.

Wenn Sie nur die div als Rahmen verwenden möchten, können Sie CSS, um das Bild zu gestalten, um einen ähnlichen Effekt zu erhalten, wie folgt aus:

<img src="..." style="border: 1px solid #000000; padding:10px;"/>​ 

Beispiel dieses Prinzips here.

Answer 2

lassen Sie alle Ihre Bilder nach links schweben.

img 
{ 
float:left; 
} 

und deutlich jedes div mit

<div style="clear:both"></div> 

als letztes Element in der Wrap div bevor es geschlossen wird.

hoffe es hilft.

Answer 3

Wenn Sie es tun, wie diese

<div id="wrapper"> 
    <img src="..."> 
</div> 

man konnte das display: inline-block; Attribut auf den wrapper hinzuzufügen. Das hat es für mich getan. Dennoch wird Ihre style='width:40%;height:40%;' ihre Höhe von ihrer Mutter als @ jesse-van-assen bereits erwähnt eingestellt werden.