Question

我正在研究一个简单的CSS网格大小，以调整图像的大小，该图像在视口大小更改时会按比例缩放。在我的示例中，图像位于最左侧的网格单元格中，而右侧的相邻单元格中则包含文本。有趣的是，调整大小的行为似乎受到不同的影响，具体取决于您使用的是chrome还是firefox。在chrome中，当文本将底部单元格边界推到超过图像高度时，图像高度将更改为匹配，从而增加了图像的大小并导致其缩放错误。而在Firefox中，图像高度似乎没有受到影响，并且会继续正确缩小。您对如何解决此问题有什么想法，或者这是CSS网格规范的firefox或chrome实现中的错误？不管是哪种方式，都希望在这里使两种浏览器的行为保持一致。

这是我在Codepen上放在一起的示例，显示了我在说什么。只需将浏览器的右边缘推到文本超过图像高度的高度，我所描述的行为就很明显。

https://codepen.io/bradnjones/full/WyyOyY

这是HTML：

<html dir="ltr" lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS GRID Firefox / Chrome behave differently</title>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>

  <div class="container">
   <img class="image" src="https://drive.google.com /uc?export=view&id=1QCw6g_h8WNfqSH_5iapODpuxNn7uciQB" alt="">
   <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</span>
  </div>
  </body>
</html>

这是CSS：

.container {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
}
.image {
    grid-column: 1/2;
    grid-row: 1/2;

    object-fit: contain;
    align-self: start;
    width: 100%;
    max-height: 100%;
}

.text {
    grid-column: 2/3;
    grid-row: 1/2;
}

Answer 1

我只是想通了。不是网格，而是图像在网格内的css fit和alignment属性。当我将对象适合度从“ cover”更改为“ contain”并添加align-self：start时，chrome的行为与Firefox相同。有关正确的代码，请参见对Codepen和原始帖子的更新。

Firefox与Chrome在CSS Grid的grid-template-column行为在图像尺寸上的差异

1 个答案: