在img标签内使用Div标签

Question

我需要在每张图片上添加文本，我使用的是img标签构建图库。我能否在img标签下附加div标签？类似于这个示例中显示的方式：

<img id="img1" class="img1_1" src="hello1_1">
  <div class="textDesc">HELLO1_1</div>
</img>

尽管div被添加到img标签中，但我看不到图像上的文本“HELLO1_1”。

请问有人可以帮忙吗？如果需要源代码，我可以分享给你。

这是测试场景的链接： http://jsfiddle.net/XUR5K/9/

- KashCSS

---

你必须反过来做。把img放在div标签里面。 - Scott

你应该描述你想要实现的目标，而不是一个假设的解决方案（这是不可能起作用的）。人们在他们的答案中对此进行了不同的猜测。你想要在图像下方（或上方或旁边）显示标题，还是想要在图像内部（上方）放置一些文本，比如地图上的名称？你的问题中存在混淆的信号。 - Jukka K. Korpela

谢谢Eddy。我颠倒了层次结构，问题得到了解决。 - KashCSS

Answer 1

图片标签不能有子元素。相反，您需要使用CSS将DIV定位在图像上方。

示例：

<div style="position: relative;">
    <img />
    <div style="position: absolute; top: 10px;">Text</div>
</div>

那只是一个例子，有很多方法可以做到这一点。

- DA.

---

谢谢大家的回答。我改变了div和img的层次结构，问题得到了解决。 - KashCSS

但是，如果图像在父div中居中，而它没有占据整个宽度，它将无法对齐。有解决方法吗？ - Royi

@Royi 确实，现在可以使用 CSS 来进行图像适应大小等选项，而且你无法知道图像的边界。如果允许使用子元素（例如标题），您将能够将它们与适应操作后的图像边界对齐。 - George Birbilis

@GeorgeBirbilis，你能举个例子吗？ - Royi

@Royi 我的意思是 https://www.w3schools.com/css/css3_object-fit.asp - 你如何知道它确切地适配图像，以便您可以将标题放置在其下方，并将其左对齐到图像的边缘？ - George Birbilis

Answer 2

img元素有自闭合标签，因此您不能给它子元素并期望它正常工作。它的内容模型被定义为empty。来源。

我怀疑您指定的任何子元素都不会被呈现，因为img元素是一个替换元素，如W3C规范所述。

- alex

Answer 3

良好编程规范：

1. 在IMG标签中使用null源。
2. 对于WebKit浏览器，使用CSS content:""。
3. 通过JavaScript插入元素。 在HTML中清除不会受影响。

您还可以使用伪元素。

例如：https://github.com/Alexei03a/canvas-img

- user1835582