带有图像的CSS网格在Firefox中的行为不同

发布于 2025-02-06 10:00:15 字数 1796 浏览 2 评论 0原文

我有此html：

<div class="parent">
  <div class="container">
    <img class="image1" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    <img class="image2" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    <img class="image3" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
  </div>
</div>

我希望.container div的大小由其.parent的20％定义。这就是我在Chrome中得到的：

为了实现我使用这些样式：

.parent {
  position: relative;
  width: 800px;
  height: 300px;
  background-color: green;
  margin: auto;
}

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    "area1 area2"
    "area1 area3";
  grid-template-rows: 50% 50%;
  height: 20%;
  gap: 5px;
}

.image1 {
  grid-area: area1;
}

.image2 {
  grid-area: area2;
}
.image3 {
  grid-area: area3;
}

img {
  height: 100%;
}

但是，我知道我的方式有点混乱，而不是一致的，例如，右边的2个图像占用了Grid容器的50％，但是我仍然需要一个我使用5px的差距。

this 是我的codepen，如果我在firefox中打开它，我会得到不同的结果：

看起来网格容器正在扩展其宽度，我不知道为什么，那么在第一个图像中如何获得一致的交叉浏览器结果？

我使用网格是因为它会响应迅速，并且我将稍后更改移动设备的模板区域，因此使用FlexBox不是一个选择。

原文

I have this HTML:

<div class="parent">
  <div class="container">
    <img class="image1" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    <img class="image2" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    <img class="image3" src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
  </div>
</div>

I want the .container div to have it's size defined by 20% of its .parent. This is what I got in Chrome:

For achieving that I used these styles:

.parent {
  position: relative;
  width: 800px;
  height: 300px;
  background-color: green;
  margin: auto;
}

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    "area1 area2"
    "area1 area3";
  grid-template-rows: 50% 50%;
  height: 20%;
  gap: 5px;
}

.image1 {
  grid-area: area1;
}

.image2 {
  grid-area: area2;
}
.image3 {
  grid-area: area3;
}

img {
  height: 100%;
}

However, I know the way I did is a bit messed and not consistent, for example, the 2 images on the right are taking 50% of the grid container, but I still need a gap which I used 5px.

This is my Codepen and if I open it in Firefox I get a different result:

Looks like the grid container is expanding its width and I have no idea why, so how can I get a consistent cross browser result to look like in the first image?

I've used grid because it will be responsive and I'll change the template areas for mobile later, so using Flexbox isn't an option.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

べ繥欢鉨o。 2025-02-13 10:00:15

将每个图像包装在其自己的容器 /包装器（DIV或图片标签）中，并给它一个100％< / code>的高度，然后减去每一行，一半的间隙以适合主容器中。

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    "area1 area2"
    "area1 area3";
  grid-template-rows: calc(50% - 2.5px) calc(50% - 2.5px); /* changed */
  height: 20%;
  gap: 5px;
}

/* new class */
.wrapper {
  height: 100%;
}

img {
  height: 100%;
}

<div class="wrapper image1">
   <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
</div>

.parent {
  position: relative;
  width: 800px;
  height: 300px;
  background-color: green;
  margin: auto;
}

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    'area1 area2'
    'area1 area3';
  grid-template-rows: calc(50% - 2.5px) calc(50% - 2.5px);
  height: 20%;
  gap: 5px;
}

.wrapper {
  height: 100%;
}

.image1 {
  grid-area: area1;
}
.image2 {
  grid-area: area2;
}
.image3 {
  grid-area: area3;
}
img {
  height: 100%;
}

<div class="parent">
  <div class="container">
    <div class="wrapper image1">
      <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    </div>
    <div class="wrapper image2">
      <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    </div>
    <div class="wrapper image3">
      <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    </div>
  </div>
</div>

Wrap each image in its own container / wrapper (div or picture tag) and give it a height of 100%, then subtract each row and half the gap to fit in the main container.

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    "area1 area2"
    "area1 area3";
  grid-template-rows: calc(50% - 2.5px) calc(50% - 2.5px); /* changed */
  height: 20%;
  gap: 5px;
}

/* new class */
.wrapper {
  height: 100%;
}

img {
  height: 100%;
}

<div class="wrapper image1">
   <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
</div>

.parent {
  position: relative;
  width: 800px;
  height: 300px;
  background-color: green;
  margin: auto;
}

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    'area1 area2'
    'area1 area3';
  grid-template-rows: calc(50% - 2.5px) calc(50% - 2.5px);
  height: 20%;
  gap: 5px;
}

.wrapper {
  height: 100%;
}

.image1 {
  grid-area: area1;
}
.image2 {
  grid-area: area2;
}
.image3 {
  grid-area: area3;
}
img {
  height: 100%;
}

<div class="parent">
  <div class="container">
    <div class="wrapper image1">
      <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    </div>
    <div class="wrapper image2">
      <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    </div>
    <div class="wrapper image3">
      <img src="https://i.pinimg.com/474x/40/bf/41/40bf419913701440c78d66c7fd722e7e.jpg" />
    </div>
  </div>
</div>

回复收藏 0 原文

~没有更多了~