时间戳

首页 > 解决方案 > 图像不占用 div 容器的大小

html - 图像不占用 div 容器的大小

问题描述

我正在尝试制作一个页面，其中顶部有一个标题和 4 个图像，它们总共占用 100vh 减去标题的高度：

我希望它看起来如何的屏幕截图

这是我尝试过的：

* {
  margin: 0;
  padding: 0;
}

.flex-container {
  display: flex;
}

.center {
  margin: 0 auto;
}

header {
  justify-content: center;
  padding: 2rem;
}

.theater {
  flex-wrap: wrap;
  height: calc(100vh - 102px);
}

.theater div {
  width: 50%;
}

.theater img {
  display: block;
  max-width: 100%;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="index.css">
  <title>Title</title>
</head>

<body>

  <header class="flex-container">
    <h1>header</h1>
  </header>

  <section class="theater flex-container">
    <div><img src="https://i.imgur.com/5e88BFi.jpg" alt="image"></div>
    <div><img src="https://i.imgur.com/5e88BFi.jpg" alt="image"></div>
    <div><img src="https://i.imgur.com/5e88BFi.jpg" alt="image"></div>
    <div><img src="https://i.imgur.com/5e88BFi.jpg" alt="image"></div>
  </section>

</body>

</html>

但是，无论我做什么，图像都会“溢出” div 容器。

我尝试使用 object-fit 来裁剪图像，但是没有用。

如果有人帮助我解决这个问题，我将不胜感激。

谢谢你。

标签： htmlcss

解决方案

推荐阅读