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

【问题标题】：making jquery flip animation responsive--- not working使jquery翻转动画响应---不工作
【发布时间】：2016-05-11 10:33:37
【问题描述】：

我正在尝试使用翻转卡片动画 (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>

【问题讨论】：

标签： jquery html css responsive-design media-queries

【解决方案1】：

添加这个 CSS

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

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

【讨论】：