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

谢谢！

解决方法

如果你还在寻找,或者对其他任何对简单解决方案感兴趣的人：

您可以通过将图像包装在Flex容器中的容器中来实现此目的,如下所示：

> Flex容器

>显示：flex
>身高：100vh

>内部容器

>保证金：自动

这就是在视口中垂直和水平居中显示未知大小的图像所需的全部内容,而不会失去滚动到其任何部分的能力,以防它不适合任何一个方向.

示例1 :(以视口为中心的图像)

body {
  margin: 0;  /* Override user agent styles */
}

.flex {
  display: flex;
  height: 100vh;
}
.container {
  margin: auto;
}

<body class="flex">
  <main class="container">
    <img src="http://placehold.it/100x100">
  </main>
</body>

示例2 :(图像不适合视口,但仍可滚动)

body {
  margin: 0;  /* Override user agent styles */
}

.flex {
  display: flex;
  height: 100vh;
}
.container {
  margin: auto;
}
img {
  border: 1px solid red;
}

<body class="flex">
  <main class="container">
    <img src="http://placehold.it/1000x1000">
  </main>
</body>

它适用于最新版本的Chrome,Firefox,Opera和Edge.

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

解决方法

猜你在找的CSS相关文章