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

时间:2020-03-30 23:23:27

标签: html css css-transitions css-grid

我知道当您在包装图像的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;
}

1 个答案:

答案 0 :(得分:1)

如果您用imgdiv(或任何其他元素)中的每个overflow:hidden包裹起来,并为img设置一些widthheight或(min-height...)运作良好。

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

只要您使用grid-column,就不必使用grid-rowflex属性。不是 grid

.related {
    display: flex;
}
.related > div {
    margin: 10px;
    overflow: hidden;
    flex-grow: 1;
}
.related-img {
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform .2s ease;
}
.related-img:hover{
    transform: scale(2);
}
<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>

如您所见,我已将transition: .2s更改为transition: transform .2s以指定显式属性,并插入了will-change属性,该属性提示浏览器元素将如何更改。