使用Flexbox和溢出来居中项目

Question

问题摘要

我想要的布局是能够在页面上(纵向和横向)居中显示未知大小的图像.如果图像太大而无法适合任何一个方向,我想显示滚动条,以便用户可以滚动查看完整图像.我遇到的问题是,当图像太大而不适合时,图像的顶部和左侧(取决于截断的部分)将永远无法滚动到.

试图解决方案

我试图使用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应该总是可以通过滚动来访问,但事实并非如此.

题

如何仅使用HTML和CSS实现上述所需的布局(JS答案不被接受)？Flexbox不是解决问题所必需的,但它将是一个很好的选择.

谢谢!

Answer 1

只需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>