html - 保持图像比例不变，因为窗口变小

Question

我有一个使用 CSS 网格完成的 3 列布局，我希望在窗口缩小时保持图像比例一致(父容器/行的最大宽度为 980 像素)。

当父容器小于 980px 时，我如何拥有它 <img>元素缩小并保持相同的比例 - 目前三个图像容器变窄但保持相同的高度。

示例代码段在下方，CodePen 链接在此处:https://codepen.io/emilychews/pen/bGNKRQP

* {box-sizing: border-box}

body {margin: 0; padding: 0; width: 100%}

.section {
    position: relative;
    display: flex;
    margin: 0 auto; 
    width: 100%;
    padding: 4.299rem 0;
    background: red;
}

.row {
    position: relative;
    margin: 0 auto;
    width: 80%;
    max-width: 980px;
    background: yellow;
}

.three-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}

.article {position: relative;}

.image {
    display: block;
    width: 100%;
    height: 12rem;
    background: lightblue;
}

<section class="section">
  <div class="row">
    <div class="three-column">
      <article class="article">
        <img class="image" src="" alt="">
        <div class="headline-wrapper top-headline-wrapper-1 headline-wrapper-mobile-padding">
          <h3>THIS IS A TITLE</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique illum ipsam facere, veniam ullam tempore laborum.</p>
        </div>
      </article>
      <article class="article">
        <img class="image" src="" alt="">
        <div class="headline-wrapper top-headline-wrapper-1 headline-wrapper-mobile-padding">
          <h3>THIS IS A TITLE</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique illum ipsam facere, veniam ullam tempore laborum.</p>
        </div>
      </article>
      <article class="article">
        <img class="image" src="" alt="">
        <div class="headline-wrapper top-headline-wrapper-1 headline-wrapper-mobile-padding">
          <h3>THIS IS A TITLE</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique illum ipsam facere, veniam ullam tempore laborum.</p>
        </div>
      </article>
    </div>
  </div>
</section>

Answer 1

您当前没有设置任何 src到图像，所以你必须设置 height为了<img>块可见。
如果最终图像要在相同的属性中，您可以删除 height属性，他们将在较小的分辨率下保持这个比率。

如果它们不在同一个属性中，您可能必须为此使用 css 的 @media 查询