どのようにイメージを同じ幅と高さにしますか？それでもブートストラップは反応しますか？

Question

私は画像と画像の下にカウントダウンの下にこのコードを持っています。すべての画像を同じ次元にするにはどうすればよいのですか？私は最小&の高さを試してみましたが、問題はまだ続きます。私は幅を&の高さに設定しようとしましたが、イメージは応答しなくなりました。 img-responsiveクラスのプロパティを設定しようとしましたが、画像が歪んで見えます。

アイデア？私はイメージが同じ次元ではなく、不均等な次元の残りの部分がイメージの背景で満たされるというこの考え方について聞いた。感謝:)

おかげで...

/* Books */ 
 

 
#books_div { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 25%; 
 
    transform: translatex(-50%); 
 
} 
 

 
#books_text { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 15%; 
 
    transform: translatex(-50%); 
 
} 
 

 
.description_one, .description_two, .description_three { 
 
    color: #9B0103; 
 
    max-width: 100%; 
 
    text-align: center; 
 
    border: 1px solid #9B0103; 
 
    border-top: none; 
 
    font-weight: bold; 
 
} 
 

 
.description_one a { 
 
    text-decoration: none !important; 
 
} 
 

 
#book_column a { 
 
    text-decoration: none !important; 
 
} 
 

 
/* End of Books */

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Books --> 
 
    <h2 id='books_text'> We Giveaway Free Books </h2> 
 
    <div class="row" id='books_div'> 
 
     
 
     <!-- First Book --> 
 
     
 
     <div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'> 
 
       <a href='#'> 
 
        <img class='img-responsive' src='https://images.gr-assets.com/books/1472913234l/29563587.jpg' alt='' id='book_cover_one' token_id='4ce0e43b806457bbc21881748d6a50d2'> 
 
       <div class='description_one'> 
 
        5:05:12 
 
       </div> </a> 
 
      </div>    
 
             
 

 
<!-- End of First Book --> 
 

 
<!-- Second Book --> 
 

 
    <div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'> 
 
       <a href='#'> 
 
        <img class='img-responsive' src='https://images.gr-assets.com/books/1388211242l/69571.jpg' alt='' id='book_cover_two' token_id='bb8673cb597c7fc7cba7bc13d9f08a4b'> 
 
       <div class='description_two'> 
 
        6:32:14 
 
       </div> </a> 
 
      </div>    
 

 

 
<!-- End of Second Book --> 
 

 
<!-- Third Book --> 
 
    <div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'> 
 
       <a href='#'> 
 
        <img class='img-responsive' src='https://images.gr-assets.com/books/1342493368l/3636.jpg' alt='' id='book_cover_three' token_id='25ea7f6c20f1f185841ed88c9a9d2f2c'> 
 
       <div class='description_three'> 
 
        7:12:04 
 
       </div> </a> 
 
      </div>    
 
              
 
<!-- End of Third Book -->

Answer 1

ただ、幅がwidth:some%

ワーキングスニペット

/* Books */ 
 

 
#books_div { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 25%; 
 
    transform: translatex(-50%); 
 
} 
 

 
#books_text { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 15%; 
 
    transform: translatex(-50%); 
 
} 
 

 
.description_one, .description_two, .description_three { 
 
    color: #9B0103; 
 
    max-width: 100%; 
 
    text-align: center; 
 
    border: 1px solid #9B0103; 
 
    border-top: none; 
 
    font-weight: bold; 
 
} 
 

 
.description_one a { 
 
    text-decoration: none !important; 
 
} 
 

 
#book_column a { 
 
    text-decoration: none !important; 
 
} 
 
.img { 
 
min-height: 300px; 
 
} 
 
/* End of Books */

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Books --> 
 
    <h2 id='books_text'> We Giveaway Free Books </h2> 
 
    <div class="row" id='books_div'> 
 
     
 
     <!-- First Book --> 
 
     
 
     <div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'> 
 
       <a href='#'> 
 
        <img class='img-responsive img' src='https://images.gr-assets.com/books/1472913234l/29563587.jpg' alt='' id='book_cover_one' token_id='4ce0e43b806457bbc21881748d6a50d2'> 
 
       <div class='description_one'> 
 
        5:05:12 
 
       </div> </a> 
 
      </div>    
 
             
 

 
<!-- End of First Book --> 
 

 
<!-- Second Book --> 
 

 
    <div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'> 
 
       <a href='#'> 
 
        <img class='img-responsive img' src='https://images.gr-assets.com/books/1388211242l/69571.jpg' alt='' id='book_cover_two' token_id='bb8673cb597c7fc7cba7bc13d9f08a4b'> 
 
       <div class='description_two'> 
 
        6:32:14 
 
       </div> </a> 
 
      </div>    
 

 

 
<!-- End of Second Book --> 
 

 
<!-- Third Book --> 
 
    <div class='col-lg-3 col-sm-6 portfolio-item' id='book_column'> 
 
       <a href='#'> 
 
        <img class='img-responsive img' src='https://images.gr-assets.com/books/1342493368l/3636.jpg' alt='' id='book_cover_three' token_id='25ea7f6c20f1f185841ed88c9a9d2f2c'> 
 
       <div class='description_three'> 
 
        7:12:04 
 
       </div> </a> 
 
      </div>    
 
              
 
<!-- End of Third Book -->

0を追加し変調するためにあなたのイメージに min-heightを追加