相关疑难解决方法(0)

删除图像下方的空白区域

在Firefox中,只有我的视频缩略图在我的图像底部和边框之间显示神秘的2-3像素空白区域(见下文).

我已经尝试过在Firebug中我能想到的一切,但没有运气.

如何删除此空格？

截图显示图像下方的空白区域

css whitespace image border removing-whitespace

Rya*_*yan

2013 10-19

240
推荐指数

7
解决办法

18万
查看次数

锚标记底部的白色空间

我有一个围绕图像的标签.我在标签所在的div上设置了边框.我将边距和填充设置为0但是由于某种原因,我的标签仍然比我的图像高约3个像素.这会在图像和边框之间留下一些空间,从而破坏了我想要完成的外观.

我究竟做错了什么？我已经在FireFox和Chrome中测试过相同的结果.谢谢

html css xhtml

Ico*_*ood

2010 07-08

52
推荐指数

2
解决办法

2万
查看次数

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

这是我没有预料到的

奇怪的是,它<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> …

Run Code Online (Sandbox Code Playgroud)

html css html5

jen*_*z0r

2016 07-14

10
推荐指数

3
解决办法

1544
查看次数