Issue with aspect-ratio and Grid layout

HTML & CSS
1

I thought I had come up with a nice way to use the aspect-ratio property. It involves having an image sitting beside text, where the image grows to the same height as the text beside it.

I had it working nicely, but then realized it only works in Chrome:

Maybe it’s just dumb luck that it works in Chrome. It seems Chrome can calculate the height of the grid and use that to set a width on the image container. In the other browsers, the image container has no width.

I wonder if anyone can see a way around this (that isn’t too complicated)?

The idea here is to click the Add text button to see what happens to the image as text is added. (As I say, though, it only works in Chrome.)

2

I’m on a mobile at the moment so can’t test but what happens if you add height:100% to .Avatar ?

3

Hi Paul. Yes, I’ve tried all sorts of things like that. When height: 100% is added to .avatar, the image does show up, and it does scale nicely, except that the .avatar grid cell is still collapsed to width: 0. So the .content cell still has 100% width, and the text sits under the image. I really can’t understand why the grid cell doesn’t wrap around the image. It’s very weird.

4

I’m back at the computer now and as I suspected you will need the extra height:100% in Firefox but you also need an extra div to help firefox work out the height.

This is what works for me in Chrome and Firefox and ios (can’t test edge as on a mac).

This is an age old problem in that the specs still say that when the height of a container depends on the height of the children but the children’s height is also dependent on the paren then you can have an unresolved circular argument.

Firefox does actually create the aspect-ratio when height:100% is used but it overlaps it over the other content incorrectly. The extra nesting seems to cure this but does need testing.

1 Like
5

Thanks Paul. I must have been typing an answer when you were posting. :slight_smile:

1 Like
6

Yes, that’s why I was surprised that Grid seemed to be able to handle this.

I’m glad you say “incorrectly”, as I was really perplexed by that.

Thanks for working out a solution, though. Your demo works in Chrome, Brave, Safari and Firefox on Mac. If anyone could text on Edge and any other browsers, that would be great!

1 Like
7

Works om Edge (Mac) and Opera (Mac)

1 Like
8

Thanks @sibertius. I’m embarrassed to admit I didn’t even know there was and Edge version for Mac.

I’ve just downloaded it myself, and interestingly the original layout also works on Edge.

9

MS Edge uses the Chrome engine AFAIK…

3 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.