javascript - 如何等比例拉伸(stretch)截面？

Question

问题

我想在固定 section 的比例的同时进行拉伸(stretch).
像这样:

我申请了 max-width: 100%; & height: auto;至 <section>但没有用。

最后，我想这样做:

顺便说一下，我使用的是 CSS 网格。
我如何制作 section以相同的速度拉伸(stretch)？

代码

html { font-size: 62.5%; }
body { display: block; margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; }  /* reset */
#items {
  display: grid;
  grid-gap: 3.8rem 4.6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.item {
  text-align: center;
  width: 25.35rem;
}
.item img {
  max-width: 100%;
  height: auto;
}
.item h2 {
  font-size: 1.6rem;
  margin-top: 1.6rem;
  margin-bottom: 1.5rem;
}
.item p {
  font-size: 1.5rem;
  margin-bottom: .8rem;
}
.item h2, .item p, .item span {
  text-align: left;
}
.item span {
  float: left;
  display: inline-block;
  font-size: 1.1rem;
  border: .1rem solid black;
  border-radius: .3rem;
  margin-right: .6rem;
  margin-bottom: .5rem;
  padding: .3rem;
}

<div id="items">
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210318.png">
      <h2>Title</h2>
      <p>Easy explanation</p>
      <span>tag</span>
      <span>tags</span>
      <span>of</span>
      <span>various</span>
      <span>lengths</span>
      <span>tag</span>
      <span>tag</span>
      <span>tag</span>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210315.png" alt="b" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210313.png" alt="c" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210310.png" alt="d" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210308.png" alt="e" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210354.png" alt="f" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210352.png" alt="g" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210349.png" alt="h" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
  </div>

Answer 1

下面的怎么样。您可以使用 @media queries 制作响应式网格。

html { font-size: 62.5%; }
body { display: block; margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; background: transparent; box-sizing: border-box; }  /* reset */
#items {
  display: grid;
  grid-gap: 3.8rem 4.6rem;
  grid-template-columns: repeat(12, 1fr);
  padding: 3.8rem;
}
.item {
  text-align: center;
  border: 1px solid red; /* Just for demonstration */
}
.item img {
  width: 100%;
  height: auto;
}
.item h2 {
  font-size: 1.6rem;
  margin-top: 1.6rem;
  margin-bottom: 1.5rem;
}
.item p {
  font-size: 1.5rem;
  margin-bottom: .8rem;
}
.item h2, .item p, .item span {
  text-align: left;
}
.item span {
  float: left;
  display: inline-block;
  font-size: 1.1rem;
  border: .1rem solid black;
  border-radius: .3rem;
  margin-right: .6rem;
  margin-bottom: .5rem;
  padding: .3rem;
}


.item {
  grid-column: span 12;
}

@media only screen and (min-width: 1000px) {
  .item {
    grid-column: span 6;
  }
}

@media only screen and (min-width: 1600px) {
  .item {
    grid-column: span 4;
  }
}

<div id="items">
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210318.png">
      <h2>Title</h2>
      <p>Easy explanation</p>
      <span>tag</span>
      <span>tags</span>
      <span>of</span>
      <span>various</span>
      <span>lengths</span>
      <span>tag</span>
      <span>tag</span>
      <span>tag</span>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210315.png" alt="b" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210313.png" alt="c" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210310.png" alt="d" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210308.png" alt="e" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210354.png" alt="f" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210352.png" alt="g" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
    <section class="item">
      <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190312/20190312210349.png" alt="h" />
      <h2>Title</h2>
      <p>Easy explanation</p>
    </section>
  </div>