用中心方形组件填充柔性容器

Question

我试图实现的目标如下图所示：

外部矩形是一个div容器，可以有任何大小和比例（它通过浏览器窗口调整大小调整大小），内部是一个组件（填充图片），应保持1：1的比例（方形），并应居中容器。所以它的边用min(container_width, container_height)公式描述。

关于如何做到这一点的任何想法？

Answer 1

这可以通过三件事的组合来实现：

• Flexbox
• CSS variables
• calc() function

Flexbox可用于确保内部元素水平和垂直居中。只需在容器上有三个不同的规则即可实现：

display: flex;
align-items: center;
justify-content: center;

当父元素具有可变宽度时，使内部元素保持正方形的关键是将子元素的w width和height基于父元素的height。

在下文中，我将内部正方形的width和height基于父容器的height（除以4）。考虑到孩子的height和width被定义为与父母的--value相同的height，它将始终保持正方形和相称：

:root {
  --value: 200px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
  height: var(--value);
}

.box {
  background: black;
  height: calc(var(--value) / 4);
  width: calc(var(--value) / 4);
}

<div class="container">
  <div class="box">
  </div>
</div>

请注意，如果您使用vh unit将CSS变量设置在视口高度之外，这也会起作用：

:root {
  --value: 50vh;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
  height: var(--value);
}

.box {
  background: black;
  height: calc(var(--value) / 4);
  width: calc(var(--value) / 4);
}

<div class="container">
  <div class="box">
  </div>
</div>

希望这可以帮助！ :)

Answer 2

我认为您可以使用以下代码实现目标。您需要将图像设置为内部div的背景，而不是直接使用<img>。

.wrapper {
    width: 100%;
    height: 300px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid red;
}

.inner {
    background: url('http://lorempixel.com/output/abstract-q-c-300-300-7.jpg') no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 100%;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

解决方案2：使用<img>并将位置设置为绝对值。

.wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;
  border: 1px solid red;
  box-sizing: border-box;
}

.wrapper img {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
}

<div class='wrapper'>
  <img src='http://lorempixel.com/output/abstract-q-c-300-300-7.jpg'>
</div>

Answer 3

你可以这样做：

html, body {width:100%;margin:0}

.container {
  position: relative;
  height: 300px; /* needs to be at least the height of the image */
  max-height: 100vh; /* enables vertical responsiveness */
  border: 1px solid Skyblue;
}

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* perfectly centered inside the container */
  display: block; /* removes bottom margin/white-space */
  max-width: 100%; /* horizontal responsiveness */
  max-height: 100vh; /* vertical responsiveness */
}

<div class="container">
  <img src="http://lorempixel.com/300/300" alt="">
</div>

Answer 4

如果在这种情况下正方形是图像，您可以执行以下操作：

.container {
  position:relative;
  text-align: center;
  border: 1px solid;
  background:#f2f2f5;
}
img {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-height: 100%;
  max-width: 100%;
}

<div class="container" style="width:400px;height:100px;">
  <img src="https://lorempixel.com/400/400/" />
</div>
<div class="container" style="width:200px;height:400px;">
  <img src="https://lorempixel.com/400/400/" />
</div>

<div class="container" style="width:400px;height:400px;">
  <img src="https://lorempixel.com/400/400/" />
</div>
<div class="container" style="width:50px;height:600px;">
  <img src="https://lorempixel.com/400/400/" />
</div>
<div class="container" style="width:600px;height:50px;">
  <img src="https://lorempixel.com/400/400/" />
</div>

使用100％高度时需要注意，因为这取决于容器的父级，如果没有指定高度将为0，因此图像也是如此：

.container {
  position: relative;
  text-align: center;
  border: 1px solid;
  background: #f2f2f5;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  max-width: 100%;
}

<!-- this one will not show -->
<div class="container" style="height:100%;">
  <img src="https://lorempixel.com/400/400/" />
</div>


<div style="height:200px">
  <!-- this one will  show -->
  <div class="container" style="height:100%;">
    <img src="https://lorempixel.com/400/400/" />
  </div>
</div>

如果你想使用div而不是图像你可以考虑div中的图像并使用fit-content值作为宽度/高度，技巧是使图像不可见，并为文本内容（或其他任何东西）添加另一个div。

注意，因为适合内容不是标准，因此并非所有浏览器都支持。因此，您可以将此解决方案视为伪解决方案而非通用解决方案

.container {
  position: relative;
  text-align: center;
  border: 1px solid;
  background: #f2f2f5;
}

.content {
  display: block;
  background: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  max-width: 100%;
  height: fit-content;
  width: fit-content;
}

.content img {
  visibility: hidden;
  z-index: -999;
  position: relative;
  max-height: 100%;
  max-width: 100%;
}

.text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

<div class="container" style="width:400px;height:100px;">
  <div class="content">
    <img src="https://lorempixel.com/400/400/" />
    <div class="text"> lorem ipsum lorem ipsum </div>
  </div>
</div>
<div class="container" style="width:200px;height:400px;">
  <div class="content">
    <img src="https://lorempixel.com/400/400/" />
    <div class="text"> lorem ipsum lorem ipsum </div>
  </div>
</div>

<div class="container" style="width:400px;height:400px;">
  <div class="content">
    <img src="https://lorempixel.com/400/400/" />
    <div class="text"> lorem ipsum lorem ipsum </div>
  </div>
</div>
<div class="container" style="width:50px;height:600px;">
  <div class="content">
    <img src="https://lorempixel.com/400/400/" />
    <div class="text"> lorem ipsum lorem ipsum </div>
  </div>
</div>
<div class="container" style="width:600px;height:50px;">
  <div class="content">
    <img src="https://lorempixel.com/400/400/" />
    <div class="text"> lorem ipsum lorem ipsum </div>
  </div>
</div>