为什么我的HTML5 <picture>的高度超出了<img>,为什么它不包含<img>？

Question

为什么我的HTML5 <picture>的高度超出了<img>,为什么它不包含<img>？

jen*_*z0r 10 html css html5

这是我没有预料到的

奇怪的是,它<picture>似乎在图像本身下方有自己的位置和高度.它的CSS height设置为auto,所以我不确定这个高度18px来自何处.

这是预期的行为

在<picture>遏制<img>内<picture>.在<picture>具有相同的高度,什么是在HTML/DOM包含在其中,例如<img>.

这就是我要做的事情,试图解决问题

我已经尝试删除我们正在使用的PictureFill库以确保图像填充容器,但这不是影响该高度的因素.

我也尝试检查DOM以查看高度的<picture>来源.此元素上没有设置填充或边距或高度.唯一的内容是它<source>和<img>,它是a的标准包含元素<picture>.

任何帮助或见解都受到高度赞赏.JSBin上的示例代码!

这是示例代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <picture content="https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=1000&amp;rect=0%2C205%2C3264%2C1632&amp;s=6fa833f7049033ffa33ac3f11ec4433a">
    <source srcset="
					https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=480&amp;rect=0%2C205%2C3264%2C1632&amp;s=d3ce62073acf8faef26303df602d98ca 480w,
					https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=600&amp;rect=0%2C205%2C3264%2C1632&amp;s=299ee1965b7991d853f1c74ece47a4fc 600w,
					https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=800&amp;rect=0%2C205%2C3264%2C1632&amp;s=7b00f35515de1a75308074e0b8531606 800w,
					https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=1000&amp;rect=0%2C205%2C3264%2C1632&amp;s=6fa833f7049033ffa33ac3f11ec4433a 1000w,
					https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=2000&amp;rect=0%2C205%2C3264%2C1632&amp;s=03b760c29e398261cef276c2bdb0fcb2 2000w
				" sizes="100vw">

      <img class="listing-hero-image js-picturefill-img" data-automation="listing-hero-image" alt="The Cat is in the (Hockey) Bag">
  </picture>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

这是我看到的一个屏幕

Answer 1

Alo*_*hci 6

图片元素默认为不可替换的嵌入式元素。CSS 2.2说到这样的元素：

内容区域的高度应基于字体，但是此规范未指定如何。

因此，图片元素的高度是一行文本的高度，与它包含的img元素无关。

要解决此问题，只需应用以下CSS： picture { display:block; }

你对“display: block”的看法是正确的，但实际上我认为在这种情况下，我们会将它应用于“<img>”。这允许 `<picture>` 具有 <img>` 的高度。谢谢你！！！ (2认同)

Answer 2

dul*_*lup 5

该问题是由于图像元素（标签“img”）的对齐造成的。

你只需要编辑你的 img css 指令：

img {display:block}

Run Code Online (Sandbox Code Playgroud)

Answer 3

zer*_*0ne 1

我在WHATWG中发现了以下内容：

图片元素与外观相似的视频和音频元素有些不同。虽然它们都包含 source 元素，但当该元素嵌套在 picture 元素中时，source 元素的 src 属性没有任何意义，并且资源选择算法不同。此外，图片元素本身不显示任何内容；它只是为其包含的 img 元素提供上下文，使其能够从多个 URL 中进行选择。

为什么我的 HTML5 的高度<picture>超出了它的高度<img>？

这意味着该<picture>元素不会采用其子元素的尺寸，包括<img>. 我说暗示是因为描述没有明确说明：<picture>不具有的尺寸<img>，但如果它实际上没有显示<img>，那么可以安全地假设它不会具有所述的尺寸<img>。

为什么它不包含<img>？

它确实包含 the ，也<img>包含 s <source>，它不是传统的容器。它只是为其包含的 img 元素提供上下文...这意味着它<picture>更像是一个列表，供<img>在选择正确的<source>.

话虽这么说，如果您需要一个容器来包装该组，请使用<figure>. 这是一个很好的语义块元素，它将包含并呈现其内容的维度......或多或少（需要一些调整，Chrome 喜欢向其中添加垃圾。请参阅 BIN）

归档时间：	9 年，4 月前
查看次数：	1544 次
最近记录：	6 年，1 月前

为什么我的HTML5 <picture>的高度超出了<img>,为什么它不包含<img>？

JSBIN