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

Posted 2021-05-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用中心方形组件填充柔性容器相关的知识，希望对你有一定的参考价值。

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

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

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

答案

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

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>

另一答案

我认为您可以使用以下代码实现目标。您需要将图像设置为内部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>

另一答案

你可以这样做：

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>

另一答案

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

.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>

以上是关于用中心方形组件填充柔性容器的主要内容，如果未能解决你的问题，请参考以下文章

使用自动布局扩展方形视图以填充矩形超级视图