Question

这是我不想要的东西

奇怪的是，<picture>似乎在图像本身下方有自己的位置和高度。其CSS height设置为auto，因此我不确定18px的高度来自何处。

这是预期的行为

<picture>包含<img>中的<picture>。 <picture>与HTML / DOM中包含的内容具有相同的高度，例如<img>。

这是我试图解决问题的方法

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

我还尝试检查DOM以查看<picture>的高度来自何处。此元素上没有设置填充或边距或高度。唯一的内容是<source>和<img>，它们是<picture>的标准包含元素。

非常感谢任何帮助或见解。 Example code on 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>

这是我所看到的一个屏幕

Answer 1

默认情况下，picture元素是未替换的内联元素。 CSS 2.2 says of such elements:

内容区域的高度应该基于字体，但是这样规范没有具体说明。

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

要修复，只需应用此css：picture { display:block; }

Answer 2

<强> CORRECTION

@ Alohci在下面的答案中的评估是正确的。但是，在这种情况下，将display: block应用于包含的<img>而不是外部<picture>可以解决问题。这样做会强制<picture>容器采用块级<img>的大小。

~~原来这个问题的答案有点基于<img>的垂直对齐，而不是<picture>元素的结构。此Stack Overflow答案似乎可以解决问题：~~

~~<击> Why is there space under the image in this code?~~

Answer 3

我在WHATWG中找到了以下内容：

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

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

这意味着<picture>元素不会影响其子级的维度，包括<img>。我说暗示因为描述没有明确说明： <picture>没有<img> 的维度，但如果它没有实际显示<img>，然后可以安全地假设它不具有所述<img>的尺寸。

为什么它不包含<img>？

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

话虽如此，如果您需要一个容器来包装该组，请使用<figure>。它是一个很好的语义块元素，它将包含并接受它的内容维度...或多或少（需要稍微调整一下Chrome就像添加垃圾一样。请参阅BIN）

JSBIN

Answer 4

问题似乎出在“图片”元素上，问题出在其元素（图像）的对齐。

您只需要编辑img css指令：

img {display:block}

为什么我的HTML5 <picture>的高度超出其<img/>，为什么它不包含<img/>？

4 个答案:

JSBIN