css – 使用Flexbox和溢出来居中项目

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

试图解决方案

我试图使用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不是解决问题所必需的,但它将是一个不错的选择.

谢谢！