How to make square image container with css grid - html

Question

I want to make a modal with a image and other elements to the right, something like this:
I tried making the modal content as a grid with two columns, the problems is when I try to adjust the image to fill all the avaiable space in the modal content, it overflows like this:
My css code looks like this:
<div class="modal">
<div class="content">
<div class="frame">
<img src="https://picsum.photos/400" alt="Example">
</div>
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis est mollitia possimus omnis nisi quo
aliquid ad accusantium dignissimos corrupti. Impedit, asperiores magnam corporis iste possimus tempore
quisquam provident dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam
consequuntur, incidunt hic dolorum tempora inventore id sint ullam magnam veniam eveniet vitae, harum
dolorem tenetur libero voluptate voluptatibus. Inventore, excepturi!
</div>
</div>
</div>
.modal {
position: fixed;
height: 100%;
width: 100%;
background-color: rgba($color: #000000, $alpha: 0.6);
display: grid;
place-items: center;
}
.content {
background-color: $color-white;
width: 60%;
height: 600px;
border-radius: 5px;
display: grid;
grid-template-columns: auto 300px;
}
.frame > img {
width: 100%;
max-height: 100%;
object-fit: cover;
}
.text {
padding: 2rem 1rem;
}
The modal I tried to do has the problem of the image overflow. I setted the container div to grid with two columns, but the image column overflows the container as we can see in the picture. I want the image to take the space avaiable in the container but maintaining the 1 : 1 aspect ratio, also to be responsive, when the user change the screen size the image always has to maintain the 1:1 aspect ratio and not crop the image.I setted the height as static pixels because I want to add a element with a scrolling bar that otherwise will overflow or expand the container if its height was declared as percentages.

Answer 1

Just specify a max-height to the container(.frame) it will start working fine for 1:1 images because max-height:100% doesn't mean anything if you don't specify a height for its parent
and if you want to work for any ratio then remove the width property from the .frame > img because if you don't specify a width it will adjust itself according to it's height

Answer 2

I think the easiest way would be to use css aspect-ratio like this:
img {
width: 100%;
aspect-ratio: 1;
}
you can read more about it here

Answer 3

I think the problem might be the fact that your image's parent ( .frame ) does not have a set height.Try adding this:
.frame {
height:100%
}

Answer 4

I solved it removing the height of the modal content div. This allow the image to take all the space it needs. For the text to the right to not overgrow the image, what i did was make a div container and inside it a p tag with position absolute and with the widht and height of his parent, but with overflow: scroll. This allowed me to have mi image in 1:1 ratio taking all the space it needs in the card but without the text overflowing things. Here is how I did it.
.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: grid;
place-items: center;
}
.container {
width: 60%;
display: grid;
grid-template-columns: 1fr 30%;
background-color: #f4f4ed;
}
.frame {
width: 100%;
height: 100%;
}
.frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
padding: 2em 0.8em;
}
.content h5 {
font-size: 1.4rem;
font-weight: 600;
color: #00f0b5;
}
.text {
flex-grow: 1;
position: relative;
height: 100%;
width: 100%;
overflow-y: scroll;
}
.text p {
font-size: 0.8rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.actions {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.actions button {
font-family: "Roboto Condensed", sans-serif;
font-weight: 600;
text-transform: uppercase;
border: none;
outline: none;
background-color: #00f0b5;
padding: 0.2em 0;
cursor: pointer;
font-size: 0.5rem;
}
body {
font-size: 62.5%;
box-sizing: border-box;
}
h5{
margin: 0;
line-height: 1;
}
<div class="modal">
<div class="container">
<div class="frame">
<img src="https://picsum.photos/800" alt="Some lorem picsum">
</div>
<div class="content">
<h5>Title</h5>
<div class="text">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum placeat sed voluptatem optio esse facere accusamus tempore, provident dolorem nemo rerum sit accusantium labore quae eveniet ea aliquam. Ipsa, aliquam? Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Laborum placeat sed voluptatem optio esse facere accusamus tempore, provident dolorem nemo rerum sit accusantium labore quae eveniet ea aliquam. Ipsa, aliquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum
placeat sed voluptatem optio esse facere accusamus tempore, provident dolorem nemo rerum sit accusantium labore quae eveniet ea aliquam. Ipsa, aliquam?
</p>
</div>
<div class="actions">
<button>Accept</button>
<button>Cancel</button>
</div>
</div>
</div>
</div>