使图像在CSS网格内自动调整大小

2024-05-03 • 问答

非常适合HTML / CSS的初学者，我需要一些有关在CSS网格中拟合图像的帮助。

我创建了一个简单的CSS网格，当我试图在其中一个网格中放置图像时，我能够获得适当的宽度，但是高度却不会改变。

我尝试过obejct-fit，最大高度与比率...等。

请您帮忙指导我如何完成这项工作吗？

这是我目前正在处理的Codepen：https://codepen.io/jyjang703/pen/poodOgw

#main {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: 250px 300px 300px auto;
  grid-gap: 10px;
  background-color: white;
  grid-template-areas: "header header header header" "section1 section2 section3 section4" "footer footer footer footer";
}

#title {
  grid-area: header;
  border: 1px solid red;
  background-color: red;
  text-align: center;
}

#section1 {
  grid-area: section1;
  border: 1px solid red;
  width: 100%;
}

#section1 img {
  object-fit: cover;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}

#section2 {
  grid-area: section2;
  border: 1px solid red;
}

#section3 {
  grid-area: section3;
  border: 1px solid red;
}

#section4 {
  grid-area: section4;
  border: 1px solid red;
}

#footer {
  grid-area: footer;
  border: 1px solid red;
}

<main id="main">

  <header id="title">
    <h1> Allen Iverson</h1>
  </header>

  <section id="section1">
    <div id="img-div">
      <figure>
        <img src="https://fsa.zobj.net/crop.php?r=FwHUQXbzIfSpz4awUIaTcY3NIgHVe1mSFMPlsB6rpnnmbj9mHPRpVHtH7c8RgxuGUffOqlWYgSbRNw4hXsKEL4NpVjgwRglygtByR-SVELuRZrvPVOfhBVpCkcS0FNh74XcecRFJpdkNtQwOy_rZO2Ftc5H606i6-pDgEjbe2Aqrn3yUNiwkTPLkq34" alt="">
        <figcaption>
          It's not about size,it's about size of your heart
        </figcaption>
      </figure>
    </div>
  </section>

  <section id="section2">
  </section>

  <section id="section3">
  </section>

  <section id="section4">
  </section>

  <footer id="footer">
    I am a Footer
  </footer>
</main>

您应该删除#img-div。将figure转换为弹性框，并限制其高度：

#section1 figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0.5em;
  box-sizing: border-box;
}

将img的flex设置为1，并使用min-height: 0使其收缩：

#section1 img {
  display: block;
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
}

示例（点击运行，然后点击整页）：

#main {
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: 250px 300px 300px auto;
  grid-gap: 10px;
  background-color: white;
  grid-template-areas: "header header header header" "section1 section2 section3 section4" "footer footer footer footer";
}

#title {
  grid-area: header;
  border: 1px solid red;
  background-color: red;
  text-align: center;
}

#section1 {
  grid-area: section1;
  border: 1px solid red;
}

#section1 figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0.5em;
  box-sizing: border-box;
  text-align: center;
}

#section1 img {
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
}

#section2 {
  grid-area: section2;
  border: 1px solid red;
}

#section3 {
  grid-area: section3;
  border: 1px solid red;
}

#section4 {
  grid-area: section4;
  border: 1px solid red;
}

#footer {
  grid-area: footer;
  border: 1px solid red;
}

<main id="main">

  <header id="title">
    <h1> Allen Iverson</h1>
  </header>

  <section id="section1">
    <figure>
      <img src="https://fsa.zobj.net/crop.php?r=FwHUQXbzIfSpz4awUIaTcY3NIgHVe1mSFMPlsB6rpnNmbj9mHPRpVHtH7c8RgxuGUffOqlWYgSbRNw4hXsKEL4NpVjgwRglygtByR-SVELuRZrvPVOfhBVpCkcS0FNh74XcecRFJpdkNtQwOy_rZO2Ftc5H606i6-pDgEjbe2Aqrn3yUNiwkTPLkq34" alt="">
      <figcaption>
        It's not about size,it's about size of your heart
      </figcaption>
    </figure>
  </section>

  <section id="section2">
  </section>

  <section id="section3">
  </section>

  <section id="section4">
  </section>

  <footer id="footer">
    I am a Footer
  </footer>
</main>

使图像在CSS网格内自动调整大小

sixupiaofubud 回答：使图像在CSS网格内自动调整大小

大家都在问