Question

我希望在div内部有一个画布，无论音阶如何，都保持1：1的宽高比。

通过使用以下样式规则创建包含div，我可以使子元素（画布）垂直和水平居中。

display: "flex",
alignItems: "center",
justifyContent: "center",

然而，经过大量谷歌搜索后，我无法找到强制执行宽高比的方法。使用顶部填充有一些奇怪的方法，但它似乎不适用于柔性盒。

我可能会决定更改其包含div中画布的相对大小，但我希望它保持居中并保持1：1的宽高比。什么css规则可以满足这些限制？

Answer 1

您需要使用max-width和max-height。

＆＃13;

.container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color:#429bf4;
}

.image {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
}

＆＃13;

<div class='container'>
  <img class='image' src='http://via.placeholder.com/300x300'>
</div>

＆＃13;

Flex示例

＆＃13;

.main {
  width: 200px;
}
.aspect1-1 {
  width:100%;
  padding-top:100%;
  position: relative;
}

.aspect1-1 div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color:#429bf4;
  display:flex;
  justify-content:center;
  align-items:center;
 
}

＆＃13;

<div class="main">
  <div class="aspect1-1">
    <div>
      <img src="http://placehold.it/100x100">
     </div>
   </div>
</div>

＆＃13;

Answer 2

如果您的主div是全屏，则可以使用vmin。您需要将canvas flex-grow和flex-shrink设置为0，以便尺寸无法响应，将min-width设置为0以缩小过去canvas（300px）的隐含宽度，使用flex-basis定义宽度，使用height定义高度（与flex-basis相同，比例为1：1 ）：

flex: 0 0 100vmin;
min-width: 0;
height: 100vmin;

＆＃13;

body {
  margin: 0;
}

.outerdiv {
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas.center {
  flex: 0 0 100vmin;
  min-width: 0;
  height: 100vmin;
  background-color: tomato;
}

＆＃13;

<div class="outerdiv">
  <canvas class="center"></canvas>
</div>

＆＃13;

如果您想要保证金，请使用calc()两倍的保证金：

flex: 0 0 calc(100vmin - 10em);
min-width: 0;
height: calc(100vmin - 10em);
margin: 5em;

＆＃13;

body {
  margin: 0;
}

.outerdiv {
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas.center {
  flex: 0 0 calc(100vmin - 10em);
  min-width: 0;
  height: calc(100vmin - 10em);
  background-color: tomato;
  margin: 5em;
}

＆＃13;

<div class="outerdiv">
  <canvas class="center"></canvas>
</div>

＆＃13;

如何水平，垂直居中div，并保持1：1的宽高比？

2 个答案: