内有全屏图像的正文边框

Question

我想实现一个在浏览器和网站内容之间有白色边框/space的网站。

在网站内部，有一个宽度和高度为 100% 的图像，它应该适应每个 window 尺寸。

像这样：

我可以用 div（包含图像）实现它并将其设置为：

position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;

但我不确定这种方法是否最好和最可靠。我想听听您的想法和一些建议。

非常感谢

Answer 1

html, body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 20px solid #fff;
  box-sizing: border-box;
}

div{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ddd;
}

<div>Image</div>

内有全屏图像的正文边框

Body border with fullscreen image inside

html

css

position