Fix messy image heights

Author: ra-coder

Project 1/templates/index.html

@@ -46,7 +46,9 @@ <h1 class="display-4">Всякие туры</h1>
     <div class="row mt-5">
       <div class="col-4">
         <div class="card mb-4">
-          <img src="https://place-hold.it/300x200" class="card-img-top img-fluid" alt="">
+          <div class="embed-responsive embed-responsive-16by9">
+             <img class="card-img-top embed-responsive-item" src="https://place-hold.it/300x200" alt="" />
+          </div>          
           <div class="card-body">
             <h2 class="h5 card-title">Hotel title</h2>
             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -56,7 +58,9 @@ <h2 class="h5 card-title">Hotel title</h2>
       </div>
       <div class="col-4">
         <div class="card mb-4">
-          <img src="https://place-hold.it/300x200" class="card-img-top img-fluid" alt="">
+          <div class="embed-responsive embed-responsive-16by9">
+             <img class="card-img-top embed-responsive-item" src="https://place-hold.it/300x200" alt="" />
+          </div>          
           <div class="card-body">
             <h2 class="h5 card-title">Hotel title</h2>
             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -66,7 +70,9 @@ <h2 class="h5 card-title">Hotel title</h2>
       </div>
       <div class="col-4">
         <div class="card mb-4">
-          <img src="https://place-hold.it/300x200" class="card-img-top img-fluid" alt="">
+          <div class="embed-responsive embed-responsive-16by9">
+             <img class="card-img-top embed-responsive-item" src="https://place-hold.it/300x200" alt="" />
+          </div>          
           <div class="card-body">
             <h2 class="h5 card-title">Hotel title</h2>
             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -76,7 +82,9 @@ <h2 class="h5 card-title">Hotel title</h2>
       </div>
       <div class="col-4">
         <div class="card mb-4">
-          <img src="https://place-hold.it/300x200" class="card-img-top img-fluid" alt="">
+          <div class="embed-responsive embed-responsive-16by9">
+             <img class="card-img-top embed-responsive-item" src="https://place-hold.it/300x200" alt="" />
+          </div>          
           <div class="card-body">
             <h2 class="h5 card-title">Hotel title</h2>
             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -86,7 +94,9 @@ <h2 class="h5 card-title">Hotel title</h2>
       </div>
       <div class="col-4">
         <div class="card mb-4">
-          <img src="https://place-hold.it/300x200" class="card-img-top img-fluid" alt="">
+          <div class="embed-responsive embed-responsive-16by9">
+             <img class="card-img-top embed-responsive-item" src="https://place-hold.it/300x200" alt="" />
+          </div>          
           <div class="card-body">
             <h2 class="h5 card-title">Hotel title</h2>
             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -96,7 +106,9 @@ <h2 class="h5 card-title">Hotel title</h2>
       </div>
       <div class="col-4">
         <div class="card mb-4">
-          <img src="https://place-hold.it/300x200" class="card-img-top img-fluid" alt="">
+          <div class="embed-responsive embed-responsive-16by9">
+             <img class="card-img-top embed-responsive-item" src="https://place-hold.it/300x200" alt="" />
+          </div>          
           <div class="card-body">
             <h2 class="h5 card-title">Hotel title</h2>
             <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -110,4 +122,4 @@ <h2 class="h5 card-title">Hotel title</h2>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 </body>
-</html>
+</html>