如何在Bootstrap中保持图像大小一致？

我有这四个响应的图像。但是，有时候由于窗口的大小，图像看起来不正确。一个例子是这样的：如何在Bootstrap中保持图像大小一致？

如何使图像响应和保持图像的比例是多少？

#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 -->

来源

2017-03-15 user6902601

图像具有固定的宽度和高度。我不明白这是如何响应。如果你想保持固定的尺寸，只需要在那里匹配原始比例的值。 – JJJ

@JJJ Bootstrap使其响应。尝试用代码片段玩:) – user6902601

一个图像是相等尺寸不。

#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>

来源

2017-03-15 09:18:56

我已经更新了代码，请不要最小宽度使用。事实上，如果你想让它响应，那么不需要指定宽度或高度。 img响应类将处理响应 –

即使一个尺寸不等，我如何使所有图像具有相同的尺寸？这就是为什么我设置'width'和'height'。有没有办法使用Bootstrap并使用维度？ :) – user6902601

是的，那么你可以使用上面使用最小高度属性，并编辑答案 –

尝试此使用长宽比

<!-- 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>

来源

2017-03-15 09:18:02

没有工作... – user6902601

对于图像响应你需要设置图像有width: 100%并保持height属性不变。这样图像将保持其比例，但随着容器越来越小，它们的高度会降低。

你可以做的另一件事是设置这些图像为background-image也background-size: cover。这样，您可以将height设置为固定量，并且图像不会变形 - 但它们会被裁剪掉以适应可用的容器空间。

来源

2017-03-15 09:22:30 Narxx

如何在Bootstrap中保持图像大小一致？

回答

相关问题