代码之家 › 专栏 › 技术社区 › Ken Sinelli

为什么要把一个<img>放在一个容器中(比如说<div>?

wrapper containers image css html

-1

Ken Sinelli · 技术社区 · 7 年前

我只是在学习编码,一直在到处寻找这个问题的答案,但由于某种原因,我什么也找不到。

我注意到,将图像放在容器或包装内似乎是常见的做法。例如,与其只是拥有:

<img src="url"/>

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

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

以这种方式将img包裹在div内的目的是什么?这似乎与“响应式设计”有关,但我不能百分之百肯定。这只是为了让我们有一些东西来调整图像的相对大小,而不是在css中的图像选择器上使用确定大小的像素吗?当我写这篇文章时,我想得越多,它似乎越是正确的答案,但我不确定这篇文章中是否还有我遗漏的东西。

如果您有任何见解,我们将不胜感激。非常感谢。

1 回复 | 直到 7 年前

SidOfc 4 年前

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

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

我知道在照片周围放一个相框是常见的做法。

其中“frame”将是包装器元素,而photo将是 <img/> .

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

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

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

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

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

推荐文章

Eric Bourque · 将旧的C++DLL转换为C#

6 年前

sfandres94 · 使用C++/CLI包装器将2D数组从C#传递到非托管C++

7 年前

NiPapen · 将参数缩放到0到1之间以进行优化

7 年前

BeSha · 模板类的输入输出类型不同时如何处理构造函数

7 年前

Ken Sinelli · 为什么要把一个<img>放在一个容器中(比如说<div>?

7 年前

Ryohei · 如何在我的软件包中使用decorator

7 年前

Ahmad Mhaish · 系统AccessViolationException:“试图读取或写入受保护的内存。(为c++库制作包装)

7 年前

ABu · 展开std::reference\u包装的成本

7 年前

Chris Phillips · 包装泛型数组的基元时出现未选中的强制转换警告

7 年前

asafg · mac os.pkg.app的节点JS包装器

7 年前