css - Chrome 上的图像溢出网格单元格,Firefox 上的正确外观 - 网格区域和媒体查询
问题描述
我一直遇到 Chrome 问题,一旦屏幕宽度小于 500 像素,图像就会超出网格单元格。在 Firefox 上我没有这个问题。我尝试了很多不同的东西,从使用 reset.css 文件到(许多)不同的 CSS 属性。
我已经为这个问题创建了一个codepen 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 >
您需要在网格类中提供背景颜色而不是关于文本。图像没有脱离网格。
推荐阅读
- python - 精度、召回率、精度和 f 测量的小数部分
- flutter - 如何使用颤振打印并连接到打印机?
- php - 值未插入配置文件表中
- c# - NpgsqlDataReader 什么都不返回
- spring-integration - MongoDbMessageStore 可以在几个 JVM 之间共享吗?
- google-cloud-dataflow - 使用 ClickhouseIO 时如何确保每秒插入 1 次
- python - 在 kivy/python 中的应用程序中自动计算结果
- javascript - 将值从 HTML/Javascript 传递到 Flask
- postgresql - 如何创建参数化 XPath 查询
- javascript - 如何在javascript中将当前系统日期格式化为DD-MON-YYYY HH12:MI:SS:AM格式