如何设置图像大小以匹配引导缩略图？

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%;
}

请注意，这不会考虑原始图像宽高比（如果不符合任何一个条件，它将被拉伸：container.width / image.width == 1＆amp;＆amp; container.height / image .height == 1

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

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

但是，根据颜色的不同，您可能会在图像的两侧看到接缝。

Answer 2

如果不知道图像的大小，这很难，但这可能会有所帮助

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

只需用正确的尺寸替换100px即可。应该使它统一。