jqueryのフリップアニメーションを反応させる---動作しない

Question

私はフリップカードアニメーション（https://nnattawat.github.io/flip/）を使用しようとしていますが、動作していません。カードの裏面幅は100％です。私が33.333％に強制すると、行が乱れてしまいます。

私を助けてください！

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

.albumbox img { 
 
\t height: 450px; 
 
\t object-fit: cover; 
 
} 
 

 
.albumbox { 
 
\t height: 450px; 
 
} 
 

 

 
#card { 
 
\t margin: 0 auto; 
 
\t height: 450px; 
 
\t 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"> 
 
    \t <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"> 
 
    \t \t  <img src="http://theblueliar.com/wp-content/uploads/2015/07/Jessie-J-012.jpg"> 
 
    \t  </div> 
 
      <div class="albumbox albumbox6 col-4"> 
 
     \t  <img src="http://theblueliar.com/wp-content/uploads/2015/07/Jessie-J-012.jpg"> 
 
    \t  </div> 
 
    </div> 
 
</main>

Answer 1

画像のオリジナルサイズがコンテナの幅よりも大きいので

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

このCSSを追加します。ウルはスクロールを得る。 max-widthをimgタグに設定すると、親幅を超えないようになります（レスポンシブ）