I have a card of sorts. On the right side of it is variable width/height content, and the left side is an image. I'd like the image to stretch vertically, taking up all of the vertical space in the card, and maintain an aspect ratio of 1/1 (so basically match its width to its height).
Is this possible without scripting it?
I was hoping the new aspect-ratio
CSS property would come in handy, but it doesn't seem to take any effect without an explicit width/height, and setting the height to 100% ends up decreasing the height in order to arrive at 1/1 aspect-ratio, instead of increasing the width.
#container { background: lightgray; display: flex; justify-content: center; align-items: center;}#object { background: pink; aspect-ratio: 1/1; overflow: hidden; align-self:stretch;}#control { font-size:1.5em;}
<div id="container" class="resizable"><div id="object"> maintain 1/1</div><div id="control"><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div></div></div>