Question

我有一个 style='width:40%;height:40%;'的img元素。我想添加一个自动包装它的div。但是当我插入div而不是包装img时，它只会扩展到内部的div。

如何强制此div包装img，以便它可以用作框架。我没有预设div的高度和宽度的原因是因为img的百分比将动态给出，所以div应该根据img的大小包装img。

Answer 1

如果你这样做

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

您可以将 display: inline-block; 属性添加到wrapper。这样做对我来说。然而，你的style='width:40%;height:40%;'将使其高度由其父母调整为@ jesse-van-assen已经提到过。

Answer 2

带有图像标签的宽度和高度为40％的问题是图像没有缩小到原始尺寸的40％，但却占据了它的父版本的40％，因为你可以看到{{3 }}

在您的情况下，您希望将图像包装在div中，但仍希望将其大小调整为其父级的40％。在这种情况下，父IS是包装div。你看到了问题。

如果您只想将div用作框架，可以使用css设置图像样式以获得类似的效果，如下所示：

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

这一原则的例子here。

Answer 3

将所有图片浮动到左侧。

img
{
 float:left;
}

并用

清除每个div

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

作为包装div中关闭之前的最后一个元素。

希望它有所帮助。