如何在CSS中保持相同尺寸的同时放大图像

Question

我知道，当您在包装图像的div中使用overflow：hidden时，尺寸将保持不变。但是我不确定如何使用flex项目。我尝试将div添加到每个图像的外部，但是它没有用，所以我恢复了原来的代码

这是我的代码：

<section id="related">
    <h1>Related Titles</h1>
    <div class="related">
        <img src="images/spiderverse.jpg" alt ="Into The Spiderverse">
        <img src="images/incredibles.jpg" alt ="The Incredible 2">
        <img src="images/megamind.jpg" alt ="Megamind">
    </div>
</section>

.related {
    display:flex;
    grid-column: 1/3;
    grid-row:5/6;

}

.related>img {
    width:65%;
    margin:10px;
}

#related>h1 {
    font-size: 30px;
    padding-bottom:20px;
}

.related>img:hover{
    transform:scale(1.2);
    transition:.2s ease;
}

Answer 1

如果用img将每个div包装在overflow:hidden（或任何其他元素）中，并为img设置一些width和height或（min-height...），则效果很好。

我不确定为什么要在每张图像上使用width: 65%，但是如果要填充整行，则可以使用flex-grow: 1。

此外，只要您使用grid-column，就不必使用grid-row和flex属性。不是 grid。

.related {
    display:flex;

}
.related>div {
    margin:10px;
    overflow: hidden;
    flex-grow: 1;
}
.related-img {
    min-width:100%;
    min-height:100%;
    will-change: transform;
    transition: transform .2s ease;
}
#related>h1 {
    font-size: 30px;
    padding-bottom:20px;
}
.related>div>img:hover{
    transform:scale(2);
}

<section id="related">
    <h1>Related Titles</h1>
    <div class="related">
        <div><img class="related-img" src="https://via.placeholder.com/150" alt ="Into The Spiderverse"></div>
        <div><img class="related-img" src="https://via.placeholder.com/150" alt ="The Incredible 2"></div>
        <div><img class="related-img" src="https://via.placeholder.com/150" alt ="Megamind"></div>
    </div>
</section>

正如您所看到的，我已经将transition: .2s更改为transition: transform .2s以定位显式属性，并插入了will-change属性，该属性提示浏览器元素将如何更改。