如何在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

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

The default padding of the ul tag.

The default margin top down of the ul tag.

The body has an extra margin by default (you're setting it to default for the right left).

我建议你使用像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>