如何使用 css 网格制作方形图像容器

Question

我想在右侧制作一个带有图像和其他元素的模态，如下所示： 我尝试将模态内容制作为具有两列的网格，问题是当我尝试调整图像以填充模态内容中的所有可用空间时，它会像这样溢出： 我的 css 代码如下所示：

  <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;
}

我尝试做的模态有图像溢出的问题。 我将容器 div 设置为具有两列的网格，但是图像列溢出了容器，正如我们在图片中看到的那样。 我希望图像占用容器中的可用空间但保持 1:1 的纵横比，同时响应，当用户更改屏幕大小时图像始终必须保持 1:1 的纵横比而不裁剪图像.我将高度设置为 static 像素，因为我想添加一个带有滚动条的元素，否则如果将其高度声明为百分比，则会溢出或扩展容器。

Answer 1

只需为容器 (.frame) 指定一个最大高度，它将开始适用于 1:1 图像，因为如果您不为其父级指定高度，则最大高度:100% 没有任何意义

如果你想为任何比例工作，那么从 the.frame > img 中删除 width 属性，因为如果你没有指定宽度，它会根据它的高度自行调整

Answer 2

我认为最简单的方法是像这样使用 css 纵横比：

img {
   width: 100%;
   aspect-ratio: 1;
}

你可以在这里阅读更多相关信息

Answer 3

我认为问题可能是您的图像的父级 (.frame) 没有设置高度。尝试添加以下内容：

.frame {
   height:100%
}

Answer 4

我解决了它删除模态内容 div 的高度。 这允许图像占据它需要的所有空间。 为了使右侧的文本不超过图像，我所做的是制作一个 div 容器，并在其中使用 position 绝对 ap 标签以及他父级的宽度和高度，但带有溢出：滚动。 这使我能够以 1:1 的比例获得 mi 图像，占用卡片中所需的所有空间，但不会让文本溢出。 我是这样做的。

 .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>