使图像具有相同的尺寸在自举网格

我建立图库与3行，每行通过使用自举网格系统含有3个图像。所有的图像都有不同的大小。我想要做的是使所有的图像相同的大小。我试图在我的CSS中使用最大高度或最大宽度，但它没有帮助使所有的图像（缩略图）相似的大小。我应该只是获得缩略图类的钻井平台还是有另一种解决方案？使图像具有相同的尺寸在自举网格

body { 
 
     padding-top: 70px;} 
 
    .row .flex { 
 
    display: inline-flex; 
 
    width: 100%;} 
 
    img { 
 
    width:100%; 
 
    min-height:100px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row match-to-row"> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/eKTUtA74uN0" alt=""> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/x-tbVqkfQCU" alt=""> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="https://source.unsplash.com/cjpGSEkXfwM" alt=""> 
 
     </div> 
 
     </div> 
 

 
     <div class="row match-to-row"> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/63JKK67yGUE" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt=""> 
 
      </div> 
 
     </div> 
 
     <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
      <img src="https://source.unsplash.com/NqE8Ral8eCE" alt=""> 
 
      </div> 
 
     </div> 
 

 
     <div class="row flex match-to-row"> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/6oUsyeYXgTg" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/WF2lvywxdMM" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-4 col-sm-6"> 
 
      <div class="thumbnail"> 
 

 
       <img src="https://source.unsplash.com/2FdIvx7sy3U" alt=""> 
 
      </div> 
 
      </div> 
 
    </div> 
 
    </div>

来源

2017-07-28 Jacob Murin

如果所有的图像是不同的大小，那么他们就会如果你让他们都具有相同的高度和宽度变得扭曲。你需要决定你是否希望它们的宽度相同，或者高度相同。 – ZimSystem

正如我所看到的那里有3 phothos y las row –

你知道使用flex的boostrap4吗？ https://v4-alpha.getbootstrap.com/utilities/flexbox/因为你要使用柔性:) –

添加CSS类IMG-响应每一个形象。

来源

2017-07-28 18:02:55

只是修改此：

img { 
    width: 100px; // how much you want 
    min-height: 100px; 
    float: left; 
    margin: 10px; 
}

来源

2017-07-28 18:04:57 Shark

我认为你正在寻找的属性是object-fit

img { 
    width: 200px; /* You can set the dimensions to whatever you want */ 
    height: 200px; 
    object-fit: cover; 
}

的object-fit物业的工作方式类似于你将如何使用background-size: cover背景图像上，使它无需拉伸即可填充页面。这样，您可以在规则中定义一个宽度，所有图片都将遵循以确保它们的大小相同，而不会扭曲图片。

你可以用这个属性使用其他值包括：

fill - 伸展的形象。
contain - 保留图像的纵横比。
cover - 填写框的高度和宽度。
none - 维持原有的规模。
scale-down - 比较无之间的差异，并包含找到的最小物体的大小。

object-fit | CSS-Tricks

来源

2017-07-28 18:23:21 natejms

使图像具有相同的尺寸在自举网格

回答

相关问题