如何解决Chrome上的图片网格单元格溢出，Firefox上的外观正确-网格区域和媒体查询
我一直在遇到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;
}
}
感谢您的帮助
解决方法
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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。