Chrome 上的图像溢出网格单元，Firefox 上的正确外观 - 网格区域和媒体查询

Question

我一直遇到 Chrome 问题，一旦屏幕宽度小于 500 像素，图像就会脱离网格单元格。在 Firefox 上我没有这个问题。我尝试了很多不同的东西，从使用 reset.css 文件到（许多）不同的 CSS 属性。

我已经为这个问题创建了一个代码笔 https://codepen.io/raul-podar/pen/wvGVRaz，请尝试调整大小以查看视觉错误。

html 文件

<body>
   <section id="about">
      <div class="grid">
         <div id="aboutText">
            <p>something random</p>
         </div>
         <div id="aboutImage">
            <img src="https://i.imgur.com/eLVL8qX.jpg" alt="">
         </div>
      </div>
   </section >
</body>

css 文件

section#about .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text image";
    background-color: #ffeded;
}

#aboutText {
    grid-area: text;
    height: 400px;
    background-color: #ed7d3a;
}

#aboutImage {
    grid-area: image;
}

#aboutImage img {
    height: auto;
    max-width: 100%;
}

@media only screen and (max-width: 68em) {
    section#about .grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 33%;
        grid-template-areas: "text" "image";
    }
    #aboutImage {
        grid-area: image;
        padding: 5%;
    }
    #aboutText {
        grid-area: text;
        height: 200px;
        width: 100%;
        background-color: #ed7d3a;
    }
    img {
        height: auto;
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
        display: block;
    }
}

感谢您的帮助

Answer 1

section#about .grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text image" ;
    background-color: #ffeded; background-color: #ed7d3a;
}

#aboutText{
    grid-area:text;
    height: 400px;
   
}
#aboutImage{
    grid-area:image;

}
#aboutImage img{
    height: auto;
    max-width: 100%;
}

@media only screen and (max-width: 1088px) {

      section#about .grid{
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 33%;
          grid-template-areas: "text"
                                "image" ;
      }

      #aboutImage{
        grid-area:image;
        padding: 5%;
        
    }
    #aboutText{
        grid-area:text;
        height: 200px;
        width: 100%;
        background-color: #ed7d3a;
    }

    img {
        height: auto;
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
        display:block;
    }
 
    }

    <section id="about">
                <div class="grid">
                    <div id="aboutText">
                        <p>something random</p>
                    </div>
                    <div id="aboutImage">
                        <img src="https://i.imgur.com/eLVL8qX.jpg" alt="">
                    </div>
                </div>
            </section >

您需要在网格中提供背景颜色 class 而不是关于文本。图像没有超出网格范围。

Answer 2

错误在 css grid-template-row 属性中。我没有指定我想要 2 行。 Firefox 是从网格 template-area 理解这一点的，而 Chrome 不是。所以这可以很容易地通过 puttin grid-template-row 来解决：例如 auto auto

Chrome 上的图像溢出网格单元，Firefox 上的正确外观 - 网格区域和媒体查询

Image overflowing grid cell on Chrome, correct appearance on Firefox - Grid areas and Media queries

css

grid-layout

media-queries

css-grid