Das Bild bleibt nicht innerhalb der div-Grenze

Webseite: isfnpub.com

Im Moment verwende ich zusätzliche Polsterung, damit das Bild passt, aber wie Sie sehen, ignoriert das div-Ding das Bild vollständig.

Ich arbeite in WordPress.

Verwendeter Code:

<div style="border: 5px solid #FFC85D; padding: 10px; margin:30px;">

<p><strong>UPCOMING RELEASE: ISFN ANTHOLOGY #1</strong></p>

<p>

<a href="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-full.jpg" 
target="_blank">
<img src="http://ISFNpub.com/wp-content/uploads/2010/07/cover-small-189x300.jpg" 
alt="" 
title="Anthology 1 front" 
width="189" height="300" 
class="size-medium wp-image-801" /></a>

<strong>Authors: </strong> blah blah blah.</p>

<p><strong>Cover Art By:</strong> Xenia Latii</p>

<p>blah blah blah</p>

</div>

Ich möchte, dass der div-Rahmen den gesamten Inhalt, einschließlich des Bildes, natürlich umschließt. Ohne die zusätzliche Polsterung überlappt das Bild den Rand und alles sieht hässlich aus.

Vielen Dank.

BEARBEITEN: ich benutzte <div style="overflow:auto; ..."> und es scheint zu funktionieren. Ist das eine angemessene Lösung oder werde ich später Probleme bekommen?

Wenn ich das richtig verstehe, denke ich, dass Sie das brauchen. Versuchen zu benutzen overflow:hidden das sollte dein problem lösen.

Versuchen overflow: hidden und stellen Sie die Breite des div zum Beispiel auf 300px ein und stellen Sie dann die Bildbreite auf 100% ein.

Sie müssen Breite und Höhe für Ihr img-Tag in div festlegen:

z.B

img style=”Breite: 100 %; Höhe: 100 %;” alt=”abc…” src=”https://somesite/your_pic.png”

Beide vorgeschlagenen Überlaufoptionen schneiden einfach den Teil des Bildes ab, der sich außerhalb des div befindet, anstatt das Bild so zu skalieren, dass es hineinpasst, was wirklich passieren muss. Ich habe das mit den div-Eigenschaften gefunden float-none scheint den Trick zu tun.