为什么我的图像不能覆盖整个模态

Question

我使用模态作为图像查看器来实现CSS http://materializecss.com/。当用户单击按钮时，模态将打开。模态中有一个图像元素。我已经将高度和宽度都设置为100％，但我无法弄清楚为什么底部仍有一条线，我的图像没有覆盖。

<div id="modal1" class="modal">
    <a id="closeIcon"><i class="fa fa-times-circle fa-2x"></i></a>
    <img class="responsive-img" id="roomImage" src="">
</div>

#roomImage{
  width: 100% !important;
  height: 100% !important;
}

Answer 1

尝试在自定义sytlesheet中添加此css。这应该按预期工作。

CSS

.modal {
  background-color: transparent;
  padding: 0;
  max-height: 100%;
  width: 55%;
  margin: auto;
  overflow-y: hidden;
  border-radius: 2px;
}

.z-depth-4, .modal {
  box-shadow: none;
}

Answer 2

这是我喜欢用来创建网站的东西。这是一个简单的CSS snipet，但它可以创造奇迹。

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {
    margin: 0;
    padding: 0;
}

我第一次在Jekyll看到这个。虽然它看似简单（并且确实如此），但它会重置所有基本元素，以便width: 100%和height: 100%实际上可以完成他们应该做的事情。