如何强制 div 在 flex 对象中保持其纵横比？答案

【问题标题】：How do I force a div to hold its aspect ratio in a flex object?如何强制 div 在 flex 对象中保持其纵横比？
【发布时间】：2022-08-17 21:53:13
【问题描述】：

我正在尝试制作一个包含圆形图片的响应式描述窗口。（正方形div 与aspect-ratio:1/1 和border-radius:50%）然而，当垂直调整窗口大小时它仍然是一个完美的圆形，但水平调整大小会导致图像挤压。我试过摆弄 CSS 代码，尝试了各种建议 - 应用填充，应用 margin:auto，阅读其他 stackoverflow 答案，但对我没有任何帮助。在这方面有更多经验的人可以帮助我吗？对不起我的意大利面条代码，我只是从我的项目中复制粘贴它，我没有改变任何东西。这里是： Codepen

body {
  background-color: gray;
}

.popcontent {
  transition: 1s;
  filter: opacity(1);
  display: flex;
  z-index: 5;
  position: fixed;
  flex-direction: row;
  margin: 10vh 0 0 5vw;
  width: 90%;
  height: 80%;
  top: 0;
  left: 0;
  background-color: white;
}

.exit {
  position: absolute;
  aspect-ratio: 1/1;
  width: 4%;
  right: 0;
}

.exit div:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.exit div:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.exit div {
  height: 5px;
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  background-color: #222d3e;
}

.popcontent #a {
  flex: 1;
  justify-content: center;
  text-align: center;
  align-items: stretch;
}

.popcontent #b {
  flex: 2;
  overflow: scroll;
  scrollbar-width: none;
  text-align: justify;
}

.popcontent #b p {
  margin: auto;
}

.popcontent #a,
.popcontent #b {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 3%;
}

.roundin {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.roundin div {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.roundimage {
  aspect-ratio: 1/1 !important;
  border-radius: 50%;
  border: 2px solid #222D3E;
  background-size: cover;
  background-position: center;
  min-height: 0;
  min-width: 0;
}

<div class=\"popcontent\">
  <div class=\"exit\">
    <div></div>
    <div></div>
  </div>
  <div id=\"a\">
    <div class=\"roundin\">
      <div class=\"roundimage\" style=\"background-image:url(\'/link/to/image\')\"></div>
    </div>
    <div class=\"details\">
      <p>Name</p>
      <p>+12345678901</p>

      <a href=\"#\">http://www.example.com</a>
    </div>
  </div>
  <div id=\"b\">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

标签： html css rounding responsive aspect-ratio

【解决方案1】：

这里是一字修复;

只需让您的.roundin 类display: block

【讨论】：