图像不完全适合其容器

我想将图像放入容器中，但由于某种原因，在图像的末尾总是会有一小块额外的空间：这里是一个带有测试的小提琴：http://codepen.io/anon/pen/sikAm。如果您查看右栏中的最后一个，则不会出现白色，因为容器隐藏了溢出。这让我觉得问题是因为图像而发生的，而不是因为容器。所以容器的尺寸变得很白，因为图像“推”了一个额外的空间。然而，图像的尺寸是正确的，它没有余量，可以在底部添加这一点，所以我可能会在错误的轨道上完全：图像不完全适合其容器

img { 
    border: 0; 
    width: auto; 
    max-width: 100%; 
    height: auto; 
}

我不知道该怎么办这个问题。什么会导致空白？我错过了什么？

来源

2014-09-04 Gasim

问题是，默认情况下，图像是内嵌元素，其vertical-align属性默认为baseline。这种对齐会在元素下面产生一些空间。

要解决它，你可以使用

display: block [Demo]。这样元素将不再是内联级别，因此vertical-align将不适用。
vertical-align: middle [Demo]。这解决了对齐问题。其他值也可能起作用。

来源

2014-09-04 17:05:35 Oriol

我觉得自己很愚蠢......所以'img'默认是内联的，对不对？ – Gasim 2014-09-04 17:16:04

由于HTML代码的换行符和空格不会导致空格。 – 2014-09-04 17:16:56

@ aniskhan001对，对不起。我很困惑，因为换行符和空格可能会导致有问题的空间，但在这种情况下不会。固定。 – Oriol 2014-09-04 17:38:46

img s的显示inline默认情况下，这对于文本的下一行自动创建的空间。

改为将display设置为block。它会使这些空间消失。

img { 
    display:block 
}

来源

2014-09-04 17:19:25

图像不完全适合其容器

回答

相关问题