Question

我正在尝试使用翻转卡动画（https://nnattawat.github.io/flip/）响应，但它不起作用...卡的背面宽度为100％。如果我将它强制为33.333％，则该行会搞砸。

请帮帮我！

$(function(){
    $("#card").flip({
        trigger: 'hover'
    });
});

.albumbox img {
	height: 450px;
	object-fit: cover;
}

.albumbox {
	height: 450px;
}


#card {
	margin: 0 auto;
	height: 450px;
	width: auto;
}

#card .back {
    background: #2184cd;
    color: #fff;
    text-align: center;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.20/dist/jquery.flip.min.js"></script>

<main>
    <div class="row">
    	<h2>Singles <i class="material-icons">album</i></h2>
        <div id="card">
            <div class="albumbox col-4 front">
                <img src="http://theblueliar.com/wp-content/uploads/2015/07/Jessie-J-012.jpg">
            </div>
            <div class="albumbox4_detail back">
            detail back
            </div>
        </div>
            <div class="albumbox albumbox5 col-4">
    		    <img src="http://theblueliar.com/wp-content/uploads/2015/07/Jessie-J-012.jpg">
    	    </div>
            <div class="albumbox albumbox6 col-4">
        	    <img src="http://theblueliar.com/wp-content/uploads/2015/07/Jessie-J-012.jpg">
    	    </div>
    </div>
</main>

Answer 1

添加此css

.albumbox img{
    height: 450px;
    object-fit: cover;
    max-width: 100%;
}

由于图像原始尺寸大于容器宽度。你得到一个卷轴。将max-width设置为img标记可确保它不超过父宽度（响应）

使jquery翻转动画响应---不工作

1 个答案: