使用 Flexbox 和 Overflow 将项目居中

2024-02-25

问题总结

我想要的布局是能够将页面上未知尺寸的图像居中（垂直和水平）。如果图像太大而无法适应任一方向，我想显示滚动条，以便用户可以滚动以查看完整图像。我遇到的问题是，当图像太大而无法容纳时，图像的顶部和左侧（取决于被截断的部分）将永远无法滚动到。

尝试的解决方案

我正在尝试使用 Flexbox 来实现所需的布局，但 Flexbox 不是必需的。这是一个重现该问题的小示例（请注意，我没有在 CSS 中添加任何浏览器前缀，因此您需要在 Chrome [或者也许是 Firefox？] 中查看此内容）：

.body {
  height: 600px;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  height: 100%;
  overflow: auto;
}

img {
  border: 5px solid black;
}

<div class="body">
  <div class="container">
    <img src="http://placehold.it/700x700" />
  </div>
</div>

您应该能够完全看到图像周围的边框，但随着窗口缩小，图像的左侧和/或顶部将被切断。随着窗口不断缩小，越来越多的图像将变得不可见。

请注意，其中是否有图像似乎并不重要。这是一个仅使用普通旧 div 来显示问题的片段：

.body {
  height: 600px;
  margin-top: 80px;
}

.container {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
  height: 100%;
  overflow: auto;
}

.content {
  border: 5px solid black;
  width: 600px;
  height: 600px;
  background-color: gray;
}

<div class="body">
  <div class="container">
    <div class="content"></div>
  </div>
</div>

同样，整个 div 应该始终可以通过滚动到达，但事实并非如此。

Question

我怎样才能实现上述所需的布局仅使用 HTML 和 CSS（不接受 JS 答案）？ Flexbox 并不是解决问题所必需的，但如果有的话那就太好了。

Thanks!

只需删除justify-content从你的 .container 中添加一个margin: auto到你的形象。

.body {
  height: 600px;
}

.container {
  margin: auto;
  display: flex;
  /* align-items: center; // no need for this anymore */
  /* justify-content: center; // remove this */
  border: 1px solid red;
  height: 100%;
  overflow: auto;
}

img {
  border: 5px solid black;
  margin: auto;  /* add this */
}

<div class="body">
  <div class="container">
    <img src="http://placehold.it/700x700" />
  </div>
</div>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)