如何在CSS中全屏显示图像？

Question

我在html中有一个图像列表，我只是想让图像全屏显示，但事实证明图像是全屏的，但它们并不对齐html的左边。灰色是我的形象。

<div id="pictures">
<ul class="img-list">
    <li>
      <a>
        <img src="images/abc/header.png"/>
      </a>
    </li>
</ul>
</div>

在css中

body{
  width:1200px;
  margin:0 auto;
}

ul.img-list {
  list-style-type: none;
  position: absolute;
  width: 100%;
}

#pictures{
  width:1200px;
  margin:0 auto;
}

Answer 1

如果你问为什么你左边有空间（实际上甚至在顶部）......这是由于：

ul标记的默认填充。

ul标签自上而下的默认边距。

默认情况下，正文有额外的边距（您可以将其设置为右侧的默认值）。

我建议你使用像Normalize.css这样的东西，或者以更严格的方式使用全局选择器（*）来删除你可能不希望它们存在的所有额外边距和填充

Answer 2

您在ul上有填充和边距，我还在width: 1200px;和width: 100%上将#pictures更改为body。

尝试使用：

<强> CSS：

body {
width:100%;
margin:0 auto;
}

ul.img-list {
    list-style-type: none;
    position: absolute;
    width: 100%;
    padding: 0;
    margin: 0;
}

#pictures{
    width:100%;
    margin:0 auto;
}

<强> HTML：

<div id="pictures">
<ul class="img-list">
    <li>
      <a>
        <img src="http://animals.sandiegozoo.org/sites/default/files/2016-09/animals_hero_lions_0.jpg"/>
      </a>
    </li>
</ul>
</div>