Question

我需要这些图像来填满整个屏幕。目前，整个页面周围以及图像之间都有一个空白区域。

<!DOCTYPE html>
<html>
<head>

<title>TITLE</title>
</head>

<style>
html, body {
    max-width: 100%;
}
</style>

<body>
<style>
.staticsite
left: 0%;
font-size: 0;
line-height: 0;
}

div {
    width: 100%;
}
</style>

<div style="staticsite">
<a href="URL" style="text-decoration: none">
    <img class="staticsite" img draggable="false" src="IMGURL" width="100%" alt=""> </a>
<img class="staticsite" img draggable="false" src="IMGURL" width="100%" alt="">
</div>

</body>
</html>

我已经尝试将它们放入填充屏幕的DIV中，我不太清楚为什么这不起作用。我刚刚将所有代码放在上面，因为这是整个页面。

Answer 1

要消除整个页面周围的空间，请将正文边距设置为零见HTML default body margin。
要使图像填满屏幕宽度，请将其设置为width:100%。
要消除图像之间的空间，请将它们设置为display:block 见Use CSS to remove the space between images。

body {
  margin: 0;
}

img {
  display: block;
  width: 100%;
}

<a href="#">
  <img src="//via.placeholder.com/300x50" alt="">
</a>
<img src="//via.placeholder.com/300x50" alt="">

Answer 2

我添加了一些额外的样式来解决您的问题。身体上的边缘将阻止白色边框，而块显示将处理图像之间的空白区域。

<html>
<head>
<style>
body {
    margin: 0;
}

img {
    max-width: 100%;
    margin:0;
    padding:0;
    width:100%;
    height:auto;
    display:block;
}
</style>

<body>
<div>
	<img src="https://img-9gag-fun.9cache.com/photo/azq0grm_460s.jpg" />
	<img src="https://img-9gag-fun.9cache.com/photo/azq0grm_460s.jpg" />
</div>
</body>
</html>

编辑：基本上与其他人的答案相同，但稍后。

去除图像两侧和中间的间距

2 个答案: