我正在嘗試使用flexbox創建以下CSS布局:

假設布局是一個flex行，左邊是一個框(圖像)，右邊是一個flex列，所有文本相互堆疊。左側框的高度會自動縮放到右側flex列的高度。到目前為止，我已經達到了這一點，但我一直無法將它變成正方形(因為寬度與高度相同)。

目前，我有產生以下結果的代碼:

.container {
  background: orange;
  display: flex;
  flex-direction: row;
}

.profile_pic {
  aspect-ratio: 1/1;
  background: blue;
}

.text_container {
  display: flex;
  flex-direction: column;
}

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

  <div class="text_container">
    <h1>Name: Toby</h1>
    <h2>Gender: Male</h2>
    <h3>Password: 123</h2>
  </div>
</div>

這花了我幾個小時，我只是認為這應該很簡單，但我不能更快找到解決方案。所以在使用flexbox、相對絕對位置甚至表格布局之后，我意識到我們可以使用網格來實現這一點。這里最重要的是第一個孩子的最小高度:100%和高度:0。高度必須為零，這樣它就不會出現在網格高度計算中，最小高度是行高度的100%:

.container {
  background: orange;
  display: grid;
  grid-template-columns: auto 1fr;
}

.profile_pic {
  min-height: 100%;
  height: 0;
  background: blue;
}

img {
  max-width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
}

.text_container {
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div class="profile_pic">
    <img src="https://placehold.co/2">
  </div>

  <div class="text_container">
    <h1>Name: Toby</h1>
    <h2>Gender: Male</h2>
    <h3>Password: 123</h3>
  </div>
  <div>

我不認為這可以用CSS解決，如果你想在高度方面盡可能靈活的話。但是幾行JavaScript就可以完成這項工作。首先確定外容器的高度。然后將接收到的值作為寬度分配給圖像容器。

給每個元素分配一個ID可能比處理類更有優勢，但是就提供的代碼而言，我不能這么說。但是，您必須使用document.getElementById()而不是document.querySelector()。

還應提及的是，高度可以根據要求以不同方式確定:

clientHeight -高度+填充(當前正在使用) 偏移高度+填充+邊框

和其他人，但那對現在來說太多了。 以下是片段...

let containerHeight = document.querySelector('.container').clientHeight;
let imgContainerWidth = document.querySelector('.profile_pic');
imgContainerWidth.style.width = containerHeight + 'px';

.container {
    display: flex;
    flex-direction: row;
    background: orange;
}

.profile_pic {
    margin-right: 30px;
    background: blue;
}

.text_container {
    display: flex;
    flex-direction: column;
}

<div class="container">
    <div class="profile_pic"></div>
    <div class="text_container">
        <h1>Name: Toby</h1>
        <h2>Gender: Male</h2>
        <h3>Password: 123</h2>
    </div>
<div>

此外，作為一個選項，您可以設置。profile _ pic { writing-mode:vertical-lr；}.。容器必須有顯示:網格；：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background: orange;
  display: grid;
  grid-template-columns: auto 1fr;
}

.profile_pic {
  aspect-ratio: 1;
  background: blue;
  writing-mode: vertical-lr;
  position: relative;
}

.profile_pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text_container {
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div class="profile_pic">
    <img src="https://picsum.photos/300/300">
  </div>
  <div class="text_container">
    <h1>Name: Toby</h1>
    <h2>Gender: Male</h2>
    <h3>Password: 123</h2>
  </div>
</div>

.container {
  background: orange;
  display: flex;
  flex-direction: row;
  height: 300px;
  align-items: center;
}

.profile_pic {
  aspect-ratio: 1/1;
  background: blue;
  height: 100%;

}

.text_container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
height: 100%;
  
}