图像不会停留在 div 边框内

Question

网站：isnpub.com

现在我正在使用额外的填充来调整图像，但正如您所看到的，div完全忽略了图像。

我在Wordpress内部工作。

使用的代码：

<div style="border: 5px solid #FFC85D; padding: 10px; margin:30px;">
<p><strong>UPCOMING RELEASE: ISFN ANTHOLOGY #1</strong></p>
<p>[caption id="attachment_801" align="alignright" 
width="189" 
caption="Click image for full cover spread."]
<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>
[/caption]
<strong>Authors: </strong> blah blah blah.</p>
<p><strong>Cover Art By:</strong> Xenia Latii</p>
<p>blah blah blah</p>
</div>

我希望div边界能够自然地围绕所有内容，包括图像。如果没有额外的填充，图像会与边框重叠，一切看起来都很难看。

谢谢。

编辑：我使用了<div style="overflow:auto; ...">，它似乎有效。这是一个合适的解决方案吗？还是我以后会遇到麻烦？

Answer 1

如果我理解正确，那么我认为这就是您所需要的。试着使用overflow:hidden来解决你的问题。

Answer 2

尝试overflow: hidden并将div的宽度设置为例如300px，然后将图片宽度设置为100%。

Answer 3

您需要在div:中为img标记设置宽度和高度

例如

img style="宽度：100%；高度：100%"alt="；abc"src="；https://somesite/your_pic.png">

Answer 4

这两个溢出选项都建议只切掉div之外的图像部分，而不是让图像调整大小以适应其中，这才是真正需要的。我发现使用div属性float-none似乎可以做到这一点。