ブートストラップで画像のサイズを一定に保つには？

Question

私は応答性であるこれらの4枚の画像を持っています。しかし、ウィンドウのサイズのために画像が正しく見えない場合があります。どのように私は、画像の比率を維持画像が応答作るとか

：例は、このですか？

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

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

 
#books_div img { 
 
    margin-bottom: 20px !important; 
 
}

<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'> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-md-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt="" style="width:200px;height:276px;"> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    <!-- End of Books -->

Answer 1

対応してください画像は、等しい寸法ではありません。イメージの場合

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

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

 
#books_div img { 
 
    margin-bottom: 20px !important; 
 
    min-height: 310px; 
 
}

<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'> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1474154022l/3.jpg" alt=""> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1328767473l/10713286.jpg" alt=""> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-sm-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1394566113l/20454074.jpg" alt=""> 
 
       </a> 
 
      </div> 
 
      <div class="col-lg-3 col-md-6 portfolio-item"> 
 
       <a href="#"> 
 
        <img class='img-responsive' src="https://images.gr-assets.com/books/1460309528l/44652.jpg" alt=""> 
 
       </a> 
 
      </div> 
 
     </div>

Answer 2

この使用アスペクト比

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
//Image here 
</div> 

<!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
//Image here 
</div> 

Answer 3

あなたはwidth: 100%を持っており、そのままheight財産を維持するために画像を設定する必要があります応答するようにします。この方法では、画像の比率は維持されますが、容器のサイズが小さくなるにつれて画像の高さが低くなります。あなたが行うことができます

もう一つは、background-imageともbackground-size: coverとして、それらの画像を設定されています。このように、あなたは一定量にheightを設定することができ、画像が歪むことはないだろう - しかし、彼らは、使用可能なコンテナのスペースに合わせてアウトクロップれます。