machen jquery Flip-Animation reagiert --- funktioniert nicht

Question

Ich versuche, Flip-Karten-Animation (https://nnattawat.github.io/flip/) reagiert, aber es funktioniert nicht ... die Breite der Rückseite der Karte ist 100%. Wenn ich es auf 33,333% erzwinge, wird die Zeile durcheinander gebracht.

Bitte helfen Sie mir!

$(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

dieses css

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

Da das Bild Originalgröße größer ist als die Behälterbreite hinzufügen. Ur eine Schriftrolle bekommen. Die Einstellung von max-width für das img-Tag stellt sicher, dass die übergeordnete Breite nicht überschritten wird (Responsive)