代码之家 › 专栏 › 技术社区 › 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%。我只是说,没有具体的理由做或不要在这里

推荐文章

GreyCat · C++参数类型,用于接受适用于基于范围的for循环的所有序列

7 年前

user8339674 · Dockerfile命令“Volume”的用途是什么?

7 年前

Dr.Knowitall · 获取docker容器的内核?我用的是docker py

7 年前

Joe · 用于创建映像、安装软件(创建映像时)和启动容器的Docker过程

7 年前

Adrian · 在容器、PTR和对象不可修改的情况下,如何传递unique\u ptr的容器?

7 年前

laxantsu · Docker Swarm覆盖网络上的端口转发

7 年前

achahbar · kubernetes吊舱被困在集装箱建造中

7 年前

Joe · Docker-如何将bash命令从一个容器调用到同一主机的另一个容器中?[已关闭]

7 年前

Tims · 从群集节点上的docker卷曲到主节点

7 年前

Dannyu NDos AJF · 通用容器转换?是否从可折叠到备用?

7 年前