CSS：Div 包装图像答案

【问题标题】：CSS: Div Wrapping ImageCSS：Div 包装图像
【发布时间】：2012-04-15 13:29:12
【问题描述】：

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

如何强制这个 div 包裹 img 以便它可以用作框架。我之所以不预设div的高宽是因为img的百分比是动态给定的，所以div要根据img的大小来包裹img。

【问题讨论】：

标签： html css

【解决方案1】：

如果你这样做

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

您可以将 display: inline-block; 属性添加到 wrapper。那是为我做的。尽管如此，您的style='width:40%;height:40%;' 仍将由其父级调整其高度，正如@jesse-van-assen 已经提到的那样。

【讨论】：

【解决方案2】：

图像标签的宽度和高度为 40% 的问题在于，图像没有缩小到其原始大小的 40%，而是占据了其父级的 40%，如您所见 here .

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

如果你只是想把 div 当作一个框架，你可以使用 css 来设置图片的样式以获得类似的效果，像这样：

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

这个原理的例子here。

【讨论】：

【解决方案3】：

让你所有的图片都向左浮动。

img
{
 float:left;
}

并用

清除每个 div

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

作为 wrap div 关闭前的最后一个元素。

希望对你有帮助。

【讨论】：