Question

如果您访问我正在处理的网站：

http://lastdeath.de/kaufmannmike/wallpaper.html

您可以在2个不同的img元素中看到2张图片（div）。那里有些奇怪。即使我，图像也有5个底部像素不管怎么说都不要设置它。我只是将img元素放在class="content"中，然后放在div id="breaker/boxer"中，没有什么真正复杂的。

但代码却不想工作。

我可以创建img的行代码，然后底部的这5个像素没有问题。但我需要将img放在div容器中。

代码：

＆＃13;

body {
  background-color: #fafafa;
  margin: 0;
  padding: 0;
}
.content {
  overflow: hidden;
  padding-top: 80px;
}
img {
  height: 100%;
  width: 100%;
}

＆＃13;

<div class="content">
  <div max-height="480px" id="breaker">
    <img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/breaker-wallpaper_long.jpg">
  </div>
  <div id="boxer">
    <img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/boxer-wallpaper_long.jpg">
  </div>
</div>

＆＃13;

如何解决这个问题？

Answer 1

只需将img设置为display:block

即可

为什么呢？因为img的默认值为display:inline

所以不要这样：

img {
    height: 100%;
    width: 100%;
}

你应该有这个：

img {
    display:block;
    height: 100%;
    width: 100%;
}

以下是基于您的网站代码的工作代码段：

body {
  background-color: #fafafa;
  margin: 0;
  padding: 0;
}
.content {
  overflow: hidden;
  padding-top: 80px;
}
img {
  display:block;
  height: 100%;
  width: 100%;
}

<div class="content">
  <div max-height="480px" id="breaker">
    <img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/breaker-wallpaper_long.jpg">
  </div>
  <div id="boxer">
    <img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/boxer-wallpaper_long.jpg">
  </div>
</div>

div容器内的图像底部有5px的间隙

1 个答案: