如何使所有這些圖像具有相同的尺寸但仍然具有Bootstrap響應能力？

我有代碼顯示圖像下面的圖像和倒計時。我如何使所有圖像相同尺寸但也讓Bootstrap響應？同時，還要確保下面的倒計時框與圖像的尺寸保持一致？謝謝:)如何使所有這些圖像具有相同的尺寸但仍然具有Bootstrap響應能力？

/* 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 -->

來源

2017-03-25 user6902601

http://gridbyexample.com –

@JeffPuckettII它是Bootstrap的插件嗎？我已經在使用Bootstrap，並且我不想重寫所有的代碼:) – user6902601

爲了讓您的圖片必須具有相同的尺寸，否則所有的圖片都會被拉伸或壓縮。或者你可以做的是給元素/ div標籤特定的寬度和高度，並添加圖像作爲背景。 – divy3993

解決方案1 

你可以在你的CSS的底部下方添加

img[id^="book_cover"]{ 
    width:500px; 
    height:500px; 
}

以上將針對所有img元素與ID以book_cover開始，示例book_cover_one，book_cover_two等

下面

/* 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[id^="book_cover"]{ 
 
    width:500px; 
 
    height:500px; 
 
} 
 
/* 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 -->

解決方案2

而不是解決方案1見片段，這似乎更簡單

.img-responsive{ 
    width:500px; 
    height:500px; 
}

來源

2017-03-25 21:26:42 repzero

嘗試多類添加到侑CSS：

.thumb img { 

    width: 100%; 
    height: 300px; 

}

這應該可以解決您的問題。

來源

2017-03-25 21:53:45 Michael

如何使所有這些圖像具有相同的尺寸但仍然具有Bootstrap響應能力？

回答

相關問題