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

【问题标题】：Image overflowing grid cell on Chrome, correct appearance on Firefox - Grid areas and Media queriesChrome 上的图像溢出网格单元格，Firefox 上的正确外观 - 网格区域和媒体查询
【发布时间】：2020-10-04 18:24:01
【问题描述】：

我一直在使用 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;
    }
}

感谢您的帮助

【问题讨论】：

尝试在媒体查询中将 max-width: 68em 更改为 max-width: 1088px
@cornonthecob 我试过了，没有任何改变：|
好的，我只是想到了你的代码，我仍然建议保留它，因为用户可以更改 em，这会导致响应性问题
这样的？ codepen.io/mbnyc/pen/mdPNgGr
@MichaelBenjamin 已经离我想要实现的目标更近了。图像仍然从 Chrome 上的 div 中取出，但无论如何它都有帮助。谢谢：D

标签： css media-queries css-grid grid-layout

【解决方案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 >

您需要在网格类而不是关于文本中提供背景颜色。图像未超出网格。

【讨论】：

嘿，如果你在单元格中保持相同的颜色，显然效果将不可见。但即便如此，您仍可以看到，在 chrome 上，与 firefox（#image 留在自己的单元格中）相比，图像要高得多（它从 #image 单元格中出来）。

【解决方案2】：

错误出现在 css grid-template-row 属性中。我没有指定我想要 2 行。 Firefox 从网格模板区域理解这一点，而 Chrome 则没有。所以这可以通过放置 grid-template-row: auto auto 来轻松解决

【讨论】：