这是我不想要的
奇怪的是,< picture>似乎在图像本身下方有自己的位置和高度.它的CSS高度设置为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&rect=0%2C205%2C3264%2C1632&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&rect=0%2C205%2C3264%2C1632&s=d3ce62073acf8faef26303df602d98ca 480w,https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=600&rect=0%2C205%2C3264%2C1632&s=299ee1965b7991d853f1c74ece47a4fc 600w,https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=800&rect=0%2C205%2C3264%2C1632&s=7b00f35515de1a75308074e0b8531606 800w,https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=1000&rect=0%2C205%2C3264%2C1632&s=6fa833f7049033ffa33ac3f11ec4433a 1000w,https://img-dev.evbuc.com/https%3A%2F%2Fs3.amazonaws.com%2Feventbrite-dev%2Fimages%2F10068705%2F149308521389%2F1%2Foriginal.jpg?w=2000&rect=0%2C205%2C3264%2C1632&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>
这是我所看到的一个屏幕
解决方法
默认情况下,picture元素是未替换的内联元素.
CSS 2.2 says of such elements:
The height of the content area should be based on the font,but this
specification does not specify how.
因此,图片元素的高度是一行文本的高度,与它包含的img元素无关.
要修复,只需应用此css：picture {display：block; }
