Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1320

Maintaining aspect ratio of a stretched flex item

$
0
0

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>

Viewing all articles
Browse latest Browse all 1320

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>