-1

I am working on a simple css grid resizing of an image that scales down and up when the viewport size changes. In my example the image is in the left most grid cell with text in the adjacent cell just to it's right. Interestingly the resize behavior seems to be impacted differently depending on whether or not your using chrome or firefox. In chrome, when the text pushes the bottom cell boundary past the image height the image height is changed to match thus increasing the size of the image and causing it to scale incorrectly. Whereas in firefox the image height doesn't seem to be impacted and continues to scale down correctly. What thoughts do you have about how to solve this or is this a bug in either the firefox or chrome implementation of the css grid spec? Would love some thoughts either way on how to make both browsers behave consistently here.

Here is an example I threw together on codepen that shows what I'm talking about. Just push your right browser edge to the point that the text exceeds the height of the image height and the behavior I've described becomes obvious.

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

Here's the 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>

Here's the 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;
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
Brad Jones
  • 91
  • 11
  • [Your codepen](https://codepen.io/bradnjones/pen/WyyOyn) link doesn't work. But by looking at your code, the problem is probably your use of percentage heights. Some browsers still require a defined height on the parent in order for a percentage height to work on the child. See my answers [**here**](https://stackoverflow.com/q/31728022/3597276) and [**here**](https://stackoverflow.com/q/33636796/3597276). – Michael Benjamin Jun 24 '18 at 12:52
  • Thank you, I looked at your articles. Interesting, I've updated my codepen link so it now works and updated the max-height to 100vh instead of percent but the problem still persists. In firefox the image continues to scale, in chrome when the text exceeds the height boundary of the grid cell the image does not proceed to scale as is made clear in my codepen example. Any other thoughts? – Brad Jones Jun 24 '18 at 13:09
  • In addition, I've tried using height instead of max height and that doesn't work in either browser as the image no longer scales instead the fixed height stays fixed but the width changes based upon the cell size creating a "stretching" effect. – Brad Jones Jun 24 '18 at 13:15
  • I just figured it out. It wasn't the Grid but the image css fit and alignment properties within the grid. When I changed object-fit from "cover" to "contain" and added align-self: start chrome behaves the same as Firefox. See updates to codepen and original post for correct answer. – Brad Jones Jun 24 '18 at 13:34

1 Answers1

0

I just figured it out. It wasn't the Grid but the image css fit and alignment properties within the grid. When I changed object-fit from "cover" to "contain" and added align-self: start, chrome behaves the same as Firefox. See updates to codepen and original post for correct code.

Brad Jones
  • 91
  • 11