Question

我希望显示一个图像，以使图像居中且较大，但同时屏幕还不够全屏，因此在垂直和水平方向上都存在均匀的白色空间。不是边框，只有空白/空白。

请查看附件中的照片，以获取所需的示例： attached photo

在图像下方，我想显示另一幅图像-相同类型的属性，甚至可能是一堆文本-尚不确定。

Answer 1

我刚刚编辑了这段代码，以便您可以使用CSS grid和flex张贴更多图像。

* {
  margin: 0;
  padding: 0;
}
.centered {
  max-width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 50%;
  margin: 0 auto;
}
.grid > img {
  width: 100%;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>temp</title>
    <link rel="stylesheet" type="text/css" href="temp.css" />
  </head>

  <body>
    <div class="centered">
      <div class="grid">
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/1/16/Lights-clouds-dark-car_%2823698576464%29.jpg"
          alt="car"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/1/16/Lights-clouds-dark-car_%2823698576464%29.jpg"
          alt="car"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/1/16/Lights-clouds-dark-car_%2823698576464%29.jpg"
          alt="car"
        />
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/1/16/Lights-clouds-dark-car_%2823698576464%29.jpg"
          alt="car"
        />
      </div>
    </div>

    <script src="temp.js"></script>
  </body>
</html>

Answer 2

你可以做到

<html>
  <body style="background:#000">
    <div style="background: #fff;padding:20px; max-width:500px; margin:auto">
      <img src="__YOUR_IMAGE_HERE__"  style="width:100%;">
    </div>
  </body>
</html>

显示图片

2 个答案: