I feel like I’m missing something obvious here, but I’ve tried everything I can think of with flexbox and grid. I have an image next to a block of copy.
- As the viewport widens, the copy cell gets wider and shorter. I want the the image
cell to maintain its aspect ratio while shrinking to the height of the copy
(copy cell will have to get wider to accommodate). - As the viewport narrows, the copy cell gets narrower and shorter. I want the image
cell to maintain its aspect ratio while growing to the height of the copy
(copy cell will have to get narrower to accommodate).
Here’s a starting point:
.container {
display: flex;
border: 1px solid #ccc;
margin: 20px;
}
.image-container {
flex: auto;
background: url('https://via.placeholder.com/400x300') no-repeat center center;
background-size: contain;
}
.text {
flex: 1;
padding: 20px;
overflow: auto;
}<div class="container">
<div class="image-container">
<!-- Image is set as a background -->
</div>
<div class="text">
<h1>Example Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Quisque arcu leo, facilisis ac elementum id, fermentum non dolor. Etiam elementum risus vitae volutpat pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed odio magna, pellentesque at nisi sit amet, scelerisque ultricies tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris consequat libero metus, in interdum massa bibendum nec.</p>
</div>
</div>