Question

我不知道如何在CSS Grid中调整图像的大小。

我不介意图像是否被裁剪，但我希望旁边的项目能够调整图像的大小，以便在调整网页大小时尽可能地缩小/增大以填充项目。

正在使用@media (min-width: 600px) { /* tablet */和@media (min-width: 1600px) { /* desktop */调整网格布局。

HTML：

<body>
  <div class="container">
    <header>
      <a href="./index.html">Home</a>
      <a href="./getting-started.html">Getting Started</a>
      <a href="./tracks.html">Tracks</a>
      <a href="./contact-us.html">Contact Us</a>
    </header>
    <main>Content</main>
    <advert>Advert</advert>
    <aside>
      <img src="https://jagrotax.co.uk/wp-content/uploads/2013/01/mojo-tyres-rotax-max.jpg" alt="Mojo Kart Tyre list">
    </aside>
    <footer>Maximilian Crosby ©</footer>
  </div>
</body>

CSS：

.container  {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 8% 10% 70% 10% 2%;
  grid-gap: 10px;
  grid-template-areas: /* mobile */
    "header"
    "advert"
    "main"
    "aside"
    "footer";
  font-family: 'Comfortaa', cursive;
  min-height: 1000px;
  background: #BCF9FF;
  text-align: center;
}

header  {
  background: #A6CFFF;
  grid-area: header;
  display: flex;
  flex-wrap: wrap;
  font-size: 26px;
  justify-content: space-evenly;
  align-items: center;
  padding: 0px 40px 0px;
}

main  {
  background: #A6CFFF;
  grid-area: main;
}

advert  {
  background: #A6CFFF;
  grid-area: advert;
}

aside  {
  background: #A6CFFF;
  grid-area: aside;
}

footer  {
  grid-area: footer;
}

Answer 1

您只需将其添加到CSS中即可

aside img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

旁边的图像需要使用100％的空间（在侧面区域内），这就是为什么宽度和高度必须为100％的原因。同样，通过使用object-fit：封面，img将保留长宽比。

这是一个小提琴： https://jsfiddle.net/cisco336/n5dzte8m/

CSS网格中的图像

1 个答案: