當我試圖在屏幕上保持圖像的一致尺寸，同時在容器中保持穩定的縱橫比時，我有點困惑。

我試著做一張小卡片，上面有一張圖片和一段文字。我認為調整圖片的寬度也會對高度產生影響，使圖片大小均勻，在多個元素中相同，像div這樣的元素也是如此。如果我不指定高度，我的div會根據里面的內容隨機選擇高度。但是，我也知道給一個高度會影響頁面的響應。我很困惑。

我嘗試過的事情:

只給圖片一個寬度而不指定高度，據我所知，這會破壞響應。 我正在使用flex，但是甚至不能創建基于flex的列:1 我試圖通過給div一個特定的高度來調整它，只有這樣它看起來大小均勻，但我認為沒有必要給元素高度，只有寬度才能解決列高度均勻的問題。 希望我說的有道理。如果我用詞有點混亂，請讓我知道。

.flex {
  display: flex;
}

.container-specs {
  width: 80%;
  height: 100vh;

  border: solid 2px burlywood;
  gap: 1rem;

  align-items: center;
  justify-content: center;
}

.container-specs > div {
  width: 100%;
  border: solid 2px brown;
  flex-direction: column;
  flex-basis: 1;
}

.container {
  justify-content: center;
}

img {
  width: 100%;
}

<div class="flex container">
        <div class="container-specs flex">
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/sea_coast_stones_940685_1280x720.jpg" alt=""/>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui et
              magnam quae ipsa corrupti facilis quasi assumenda alias numquam
              magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Modi repellendus iusto laboriosam doloribus corrupti at.
              Recusandae sint quisquam ducimus soluta minima, ratione voluptatum
              omnis repellat iusto, accusamus amet! Enim ratione consequatur
              unde sit dolore tenetur!
            </p>
          </div>
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/road_fog_valley_938056_1280x720.jpg" alt=""/>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Doloribus vero deserunt quos, expedita est fugiat minima maxime
              debitis aliquam ea? Velit nisi sapiente soluta sit aut corporis
              eaque omnis, odit mollitia cumque hic! Iusto, autem.
            </p>
          </div>
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/stream_meadow_flowers_933530_1280x720.jpg" alt=""/>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Molestiae accusantium asperiores quibusdam quam iusto. Incidunt
              consequatur temporibus magni debitis culpa soluta laudantium,
              voluptatem maxime minus reprehenderit? Perferendis, ipsam. Enim
              facilis iste, provident deleniti ab omnis.
            </p>
          </div>
        </div>
</div>

你是說像這樣嗎？

.flex {
  display: flex;
}

.container-specs {
  width: 100%;
  min-height: 100vh;
  padding: 1rem 1rem;
  border: solid 2px green;
  gap: 1rem;
  justify-content: center;
}

.container-specs > div {
  width: 100%;
  border: solid 2px red;
  flex-direction: column;
  flex-basis: 1;
  display: flex;
}

.container {
  justify-content: center;
}

img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-height: 500px;
}

<div class="flex container">
        <div class="container-specs flex">
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/sea_coast_stones_940685_1280x720.jpg" alt=""/>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui et
              magnam quae ipsa corrupti facilis quasi assumenda alias numquam
              magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Modi repellendus iusto laboriosam doloribus corrupti at.
              Recusandae sint quisquam ducimus soluta minima, ratione voluptatum
              omnis repellat iusto, accusamus amet! Enim ratione consequatur
              unde sit dolore tenetur!
            </p>
          </div>
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/road_fog_valley_938056_1280x720.jpg" alt=""/>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Doloribus vero deserunt quos, expedita est fugiat minima maxime
              debitis aliquam ea? Velit nisi sapiente soluta sit aut corporis
              eaque omnis, odit mollitia cumque hic! Iusto, autem.
            </p>
          </div>
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/stream_meadow_flowers_933530_1280x720.jpg" alt=""/>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Molestiae accusantium asperiores quibusdam quam iusto. Incidunt
              consequatur temporibus magni debitis culpa soluta laudantium,
              voluptatem maxime minus reprehenderit? Perferendis, ipsam. Enim
              facilis iste, provident deleniti ab omnis.
            </p>
          </div>
        </div>
</div>