为什么要将 <img> 放在容器中（例如，像 <div>）？答案

【问题标题】：Why put an <img> inside a container (like a <div>, for instance)?为什么要将 <img> 放在容器中（例如，像 <div>）？
【发布时间】：2017-11-25 22:48:32
【问题描述】：

我刚刚学习编码，一直在到处寻找这个问题的答案，但由于某种原因找不到任何东西。

我注意到将图像放入容器或包装器中似乎是一种常见的做法。例如，而只是拥有：

<img src="url"/>

似乎每个人都同意它需要这样：

<div class="container">
<img=src"url"/>
</div>

以这种方式将img包装在div中的目的是什么？它似乎与“响应式设计”有关，但我不是 100% 确定。是否只是为了让我们有一些东西来调整图像的大小，而不是在 css 中的图像选择器上使用像像素这样的确定大小？我在写这篇文章时思考得越多，它似乎就越是正确的答案，但我不确定我是否还缺少其他东西。

任何见解将不胜感激。谢谢。

【问题讨论】：

只是因为image是inline element，div是block element...你可以阅读一下inline和block的区别就明白了

标签： html css image containers wrapper

【解决方案1】：

不幸的是，对此没有“单一”的正确答案。关于为什么将任何元素包装在另一个元素中的原因可能有很多，它并不特定于<img />标签:)

在您的问题中，我读到了这样的内容（转换为现实世界的示例）：

我发现在照片周围放置相框是很常见的做法。

“框架”是包装元素，照片是<img />。

这样看可能会更清楚。照片是最重要的部分，从技术上讲，您不需要框架来显示照片。如果您只有一张照片，您将无法将其挂在墙上，而不会通过钉子穿过顶部或使用一些胶带将其损坏。如果你有一个相框，你可以让那张照片占据其中任意数量的可用空间，你可以用夹子把它挂在墙上，如果你把多张照片放在相框中，你可以一次移动它们因为它们在同一个框架中。

大多数人将图像放在“容器”中的原因是，与单独使用图像相比，他们从中获得了某种优势，这可以从纵横比锁定到相对定位。在某些情况下，还需要包装器来实现某些（尤其是更复杂的）动画。

网站是由“逻辑”部分组成的，这些部分共同构成一个网站。各个部分都是“框架”，它们“流动”在一起以创建您在每个网站上看到的任何页面布局。

这只是一种结构化的思维方式，如果该图像的目的是用作整个页面的背景图像，更好的选择是在 <body> 标签上使用 CSS background-image 属性和根本不使用图像。但是，如果该图像是您网站的一小部分的一部分，则它可能应该包含在适当的位置。

这个答案绝不是一个指南，也不是一个规则集或类似的东西，它们只是另一个开发者的想法。包装元素的原因有很多，而这个答案甚至没有涵盖 0.0000001% 的情况。我只是说——这里没有具体的理由做或不。

【讨论】：