如何使图像具有相同的宽度和高度，但仍然是 Bootstrap 响应的？

Question

所以，我在下面的代码中有图像和图像下方的倒计时。如何使所有图像具有相同的尺寸，但仍使其响应 Bootstrap？我试过做最小和最大高度，但问题仍然存在。我尝试设置宽度和高度，但图像不再响应。我已经尝试为 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

只需在图像中添加min-height 即可调整宽度添加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 -->