html - 如何设置图像大小以匹配 Bootstrap 缩略图？

Question

如您所见，我的缩略图中没有正确显示正确的图像

奇怪的是两张图片的分辨率完全相同(显然来自谷歌图片)

 <div class="jumbotron">
   <div class "container">
    <h1>In Your Shoes:<br> Make Connections Anonymously<br> </h1>
     <h2>
      <div class="row">
        <div class="col-xs-4 col-md-4 col-lg-4">
          <a href="#" class="thumbnail">
            <%= image_tag("blank_avatar_male.jpg") %>
          </a>
         </div> 
          <div class="col-xs-4 col-md-4 col-lg-4">
           <a href="#" class="thumbnail">
             <%= image_tag("img_thing.jpeg") %>
           <a/>
          </div>
          <div class="col-xs-4 col-md-4 col-lg-4">
           <a href="#" class="thumbnail">
           <%= image_tag("blank_avatar_female.jpg") %>
           </a>
          </div>
         </div> 
      </h2> 

我知道 html 代码看起来不漂亮，因为我自己正在这样做。 我愿意接受有关如何改进它的建议!谢谢

Answer 1

对大小使用百分比解密，如下所示:

.thumbnail img {
    width:100%;
    height:100%;
}

请注意，这不会尊重原始图像的纵横比(如果不满足任一条件，它将被拉伸(stretch):container.width/image.width==1 && container.height/image.height= =1

您可以执行以下操作来解决此问题:在匹配高度的同时将图像水平居中:

.thumbnail img {
    text-align: center;
    height:100%;
}

但是，您可能会在图像的两侧看到接缝，具体取决于颜色。