Как увеличить изображение, сохраняя размеры в CSS

Question

Я знаю, что когда вы используете переполнение: скрытое в div, обертывающем изображение, размеры останутся прежними. Но я не уверен, как это сделать с гибкими предметами. Я попытался добавить 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.

Также вам не нужно использовать * Атрибуты 1014 * и 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, который подсказывает браузерам, как элемент ожидается изменение.