Chrome中的CSS网格图像和列问题答案

【问题标题】：CSS Grid image and column issue in ChromeChrome中的CSS网格图像和列问题
【发布时间】：2020-02-17 01:15:11
【问题描述】：

在 Chrome 中，my site 在桌面和移动设备上取得了突破。

问题：

第二部分没有正确显示英雄图像。图片应该有两半，当悬停时，它们会连接在一起。
英雄图片跳转到页面顶部，只有一半的图片可见。

当我去检查页面时，我在控制台中看到了以下内容

[弃用] 不定高度网格容器的百分比行轨道和装订线将根据固有高度解决，而不是分别被视为自动和零

我查看了它并来到find the fix，因为所说的问题是将 grid-template-rows 或 grid-auto-rows 中的百分比更改为自动。

我应用了给定的修复程序，但问题仍然存在。它只在谷歌浏览器中中断。该网站在 Firefox 中看起来不错。

这是代码。

HTML：

        <section class="page">
          <div class="details">
            <h1>Skyline KPGC110</h1>
            <h2>1973</h2>
          </div>
          <div class="hero">
            <a href="./kenmeri.html">
              <img class="model-left" src="./images/front-1.png" alt="model">
              <img class="model-right" src="./images/front-2.png" alt="model">
            </a>
          </div>
        </section>

        <!-- ------------------------------ Seciton 2 ------------------------------ -->

        <section class="page about">
          <div class="details">
            <h1>Skyline PGC10</h1>
            <h2>1969</h2>
          </div>
          <div class="hero">
            <a href="./pgc10.html">
              <img class="model-left" src="./images/gtr-left.png" alt="chef">
              <img class="model-right" src="./images/gtr-right.png" alt="chef">
            </a>
          </div>
        </section>

        <!-- ------------------------------ Section 3 ------------------------------ -->

        <section class="page reel">
          <div class="details">
            <h1>Fairlady 240z</h1>
            <h2>1973</h2>
          </div>
          <div class="hero">
            <a href="./fairladyz.html">
              <img class="model-left" src="./images/240z-left.jpg" alt="model">
              <img class="model-right" src="./images/240z-right.jpg" alt="model">
            </a>
          </div>
        </section>

桌面视图：

.page {
  display: grid;
  grid-template-columns: 5% 1fr 1fr 1fr 5%;
  min-height: 90vh;
}

.about,
.reel {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

.hero {
  display: flex;  /*  gets rid of gap between imgs */
  align-self: center;
  justify-self: center;
  height: 500px;
  overflow: hidden;
}
.hero a {
  display: flex; /* removes seperation created by a tag */
}

.hero img {
  height: 500px;
  transition: transform 0.3s ease-out;
  cursor: pointer;
}

断点 1（笔记本电脑）：

@media screen and (max-width: 1024px) {
  .page {
    grid-template-columns: 5% 1fr 5%;
    grid-template-rows: 2fr 1fr;
    align-items: center;
  }

  .hero {
    height: auto;
    grid-column: 2;
  }

  .hero img {
    height: 425px;
  }
}

断点 2（移动）：

@media screen and (max-width: 768px) {
  .page {
    grid-template-rows: 1fr;
  }

  .page-1 h3 {
    font-size:  1.125rem;
    padding-right: 20px;
  }

  .hero img {
    width: auto;
  }

  .details h2 {
    font-size: 28px;
  }
}

如果您想全面了解代码，请访问回购链接here。

【问题讨论】：

标签： html css grid css-grid

【解决方案1】：

在您的代码中，

img {
   display: block;
   width: 100%; 
   height: 100%;
}

只要去掉 width: 100% 就可以了。

【讨论】：