我知道当您在包装图像的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;
}
答案 0 :(得分: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 {
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
属性,该属性提示浏览器元素将如何更改。