Question

.film{
    text-align: center;
    width: 234px;
    min-height: 311px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.poster{
    width: 234px;
    height: 311px;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    display: block;
}
.poster:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.film_name{
    font-size: 24px;
    word-wrap: break-word;
    font-family: 'Roboto', 'Arial', 'Tahoma', sans-serif;
    font-weight: 700;
}
.year{
    color: #00dfff;
}

<div class="film">
    <a href="#" target="_blank">
        <img class="poster" src="https://st.kp.yandex.net/images/poster/sm_3362295.jpg" alt="Годзилла 2: Король монстров">
        <div class="triangle">
            <span class="triangle__line"></span>
            <span class="triangle__line"></span>
            <span class="triangle__line"></span>
        </div>
        <div class="film_name">Годзилла 2: Король монстров</div>
        <div class="year">2019</div>
    </div>
    </a>
</div>

如何使图片超出垂直方向？

高度（.film{ min-height: 311px;}）属性不需要更改。

Answer 1

在电影课中将overflow: hidden;更改为overflow: visible;。见下文：

.film {
    text-align: center;
    width: 234px;
    min-height: 311px;
    position: relative;
    z-index: 1;
    overflow: visible;
}

Answer 2

将div（海报面板）添加到图像标签并设置overflow：hidden ...，以便图像将在海报面板div内延伸。

.film{
    text-align: center;
    width: 234px;
    min-height: 311px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.poster-panel{
overflow: hidden;
}
.poster{
    width: 234px;
    height: 311px;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    display: block;
}
.poster:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.film_name{
    font-size: 24px;
    word-wrap: break-word;
    font-family: 'Roboto', 'Arial', 'Tahoma', sans-serif;
    font-weight: 700;
}
.year{
    color: #00dfff;
}

<div class="film">
    <a href="#" target="_blank">
    <div class="poster-panel">
        <img class="poster" src="https://st.kp.yandex.net/images/poster/sm_3362295.jpg" alt="Годзилла 2: Король монстров">
    </div>    
        <div class="triangle">
            <span class="triangle__line"></span>
            <span class="triangle__line"></span>
            <span class="triangle__line"></span>
        </div>
        <div class="film_name">Годзилла 2: Король монстров</div>
        <div class="year">2019</div>
    </div>
    </a>
</div>

如何在悬停时水平而不是垂直拉伸图像？

2 个答案: