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

问题描述

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

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

<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;
    }
}

感谢您的帮助

解决方法

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 >

您需要在网格类中提供背景颜色，而不是about文本。图像没有从网格中移出。

错误出在css grid-template-row属性中。我没有指定要2行。 Firefox从网格模板区域了解了这一点，而Chrome没有。因此，可以通过puttin grid-template-row轻松解决此问题：例如auto auto