html - 如何水平、垂直居中div并保持1 :1 aspect ratio?

Question

我希望在 div 中有一个居中的 Canvas ，无论其比例如何，都保持 1:1 的纵横比。

通过使用以下样式规则创建一个包含 div，我能够使子元素( Canvas )在垂直和水平方向上居中。

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

但是，经过大量谷歌搜索后，我无法找到一种强制纵横比的方法。有一些使用顶部填充的奇怪方法，但它似乎不适用于 flex box 的情况。

我可能决定更改 Canvas 在其包含的 div 中的相对大小，但我希望它保持居中并保持 1:1 的纵横比。哪些 css 规则可以满足这些约束？

Answer 1

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

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

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

Flex 示例

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

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