为什么将 <img> 放入容器中(例如 <div>)?

Ken*_*lli -1 html css containers image wrapper

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

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

<img src="url"/>
Run Code Online (Sandbox Code Playgroud)

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

<div class="container">
<img=src"url"/>
</div>
Run Code Online (Sandbox Code Playgroud)

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

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

Sid*_*Ofc 6

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

在你的问题中,我读到了这样的内容(转换为现实世界的例子):

我发现在照片周围加一个框是很常见的做法。

其中“框架”将是包装元素,照片将是<img />.

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

大多数人将该图像放入“容器”中的原因是因为与单独使用图像相比,他们从中获得了某种优势,这可能包括从宽高比锁定到相对定位。在某些情况下,还需要包装器来实现某些(尤其是更复杂的)动画。

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

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

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