图片无法填满div元素

Question

图片无法填满div元素

9

CSS/HTML问题。

这真是太疯狂了 - 我只能假设我很蠢。我无法使我的图片填充它所在的div。图像下方始终有5像素的“填充”。

以下是html代码：

<!doctype html>

<head><link rel="stylesheet" href="style.css" type="text/css" /></head>

<body>
<div class="row">
<img src="pic2.jpg" />
</div>
</body>

这里是 CSS：

body, .row, img {
padding: 0;
margin: 0;
border: none;
}

.row {
width: 80%;
background-color: orange;
}

img{
width: 50%;
}

这是结果：

http://imgur.com/yELMe

如您所见，（愚蠢的）蓝色和红色图像未填满橙色div。图像下方始终显示5个像素的橙色。这不受div或图像的%宽度更改或调整窗口大小的影响。

我可以通过“margin：-5px;”来解决此问题，但我想知道为什么会发生这种情况（特别是在不同情况下数量是否大于或小于5px）。

感谢您的帮助（如果这是我的荒谬错误，请再次道歉）。

- Joe_AK

这是一个实时示例：http://jsfiddle.net/aDtUm/ - jacktheripper

2个回答

5

我通过将 img 的 display 设置为 block 来解决了这个问题：

display: block;

- Sky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

像这样将垂直对齐值（不是默认的baseline）添加到您的图像中：top，middle ...

vertical-align: top;

例子:

/* QuickReset */ *, ::after, ::before { margin: 0; box-sizing: border-box; }

.row {
  background-color: orange;
}

img {
  vertical-align: middle;    /* or top, bottom, ...  */
}

<div class="row">
  <img src="https://www.gravatar.com/avatar/69cfcc1895204718647d030c5e887cbe?s=64&d=identicon&r=PG" />
  <span>Some text</span>
</div>

或者，您可以将父元素的display设置为flex、inline-flex或grid - 如果这符合您的需求

/* QuickReset */ *, ::after, ::before { margin: 0; box-sizing: border-box; }

.row {
  background-color: orange;
  display: flex;
  align-items: center;
}

<div class="row">
  <img src="https://www.gravatar.com/avatar/69cfcc1895204718647d030c5e887cbe?s=64&d=identicon&r=PG" />
  <span>Some text</span>
</div>