Html 在CSS网格中使用绝对/固定定位

我尝试在我的一个div中使用绝对定位，该div具有display:grid样式。基本上是一个图像，它是一个div的孙子，我需要它有位置：绝对。我知道您可以实现这一点，但是，我在祖父母div中添加了一个边框，以查看它是否正常工作，并且图像似乎从边框流出，但仍然根据我设置的网格正确定位

以下是CSS：

.one {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: repeat(8, minmax(auto, 1fr));
    grid-gap: 5vh;
    border: 1px solid black;
}

.description {
    grid-column: 2/4;
}

.image {
    grid-column: 5/-1;
    position: relative;
}

.image img {
    position: absolute;
    opacity: 0;
    z-index: 0;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.image img.visible {
    opacity: 1;
    z-index: 1;
}

以下是HTML：

<div class="one">
            <div class="details">
                <span class="s-highlight">An Inquiry on Food Waste</span><br><br> Publication
                <br><br> 2018
            </div>
            <div class="description">
                ...
            </div>
            <div class="image">
                    <img class="visible" id="satu" src="assets/img/1/1-5.png" alt="">
                    <img id="satu" src="assets/img/1/1-2.png" alt="">
                    <img id="satu" src="assets/img/1/1-6.png" alt="">
                    <img id="satu" src="assets/img/1/1-7.png" alt="">
                    <img id="satu" src="assets/img/1/1-8.png" alt="">
                    <img id="satu" src="assets/img/1/1-10.png" alt="">
                    <img id="satu" src="assets/img/1/1-9.png" alt="">

            </div>
        </div>

食物垃圾调查

出版物


2018年
...

---

边框仅延伸到文本，而不延伸到较大的图像，从而使图像溢出边框。是什么导致边框无法延伸到图像的其余部分？

您还没有告诉

img

要多大……您需要将高度和宽度指定为100%，一个小的演示会很有用。