Question

我觉得我已经阅读了大约20个左右的类似帖子，但似乎没有一个我正在寻找的确切内容。

问题：

我有一排图像（例如3个）。每个图像具有不同的宽高比。我希望连续显示所有图像，使其高度相等。包含图像的列的宽度是流动的。我自己没有固定高度，我也不想随意限制图像的高度。图像（及其填充）完全填满水平空间;这决定了高度（因为保持了纵横比）。当窗口缩小（移动大小）时，我希望所有图像都放在另一个之下，就像bootstrap的响应式布局一样。

我尝试了很多东西。我非常确定我不能使用引导列类（如col-md-4），因为它们会改变其内容的大小以保持固定的宽度。据我所知，bootstrap并没有提供一个干净的解决方案。我也尝试了表格响应，这似乎没有帮助。非常感谢帮助。

Answer 1

这是一个解决方案：

td img {
    height: 12vw;
    width: auto;
    margin: 4px;
}
div {
    border: 1px solid gray;
}
table {
	width: auto;
    margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <table>
    <tr>
      <td>
      <img src="//placehold.it/200x150/2255EE">
    </td>
    <td>
      <img src="http://placekitten.com/300/450">
    </td>
    <td>
      <img src="http://placekitten.com/450/300">
    </td>
  </tr>
  </table>
  <table>
    <tr>
      <td>
        <img src="http://placehold.it/200x400">
    </td>
    <td>
      <img src="http://placehold.it/400x200">
    </td>
    <td>
      <img src="http://placehold.it/300x300">
    </td>
  </tr>
  </table>
</div>
</div>

Answer 2

试试这个。无论你添加到这三个div中的图像，它们的高度总是相等而不会切割图像。

将循环重复45次以显示最终结果，通过在代码中将宽度变化从0.5％增加到1％，您也只能执行此操作15次。（for循环的最后一行）。

你也可以将宽度变化为2％并使循环只进行4次，然后从图像中裁剪出额外的高度（它不会超过15到20px左右），你必须重复它4次而不是45次。

$(document).ready(function(){
  var width = [33.33,33.33,33.33];
  for(var j=0;j<45;j++){
  var height1 = $(".imagecol").eq(0).css("height");
  var height3 = $(".imagecol").eq(1).css("height");
  var height3 = $(".imagecol").eq(2).css("height");
  var maxH=height1;
  var maxHi=0;
  var minH=height1;
  var minHi=0;
  for(var i=1;i<3;i++){
    if($(".imagecol").eq(i).css("height")>maxH){
      maxH = $(".imagecol").eq(i).css("height");
      maxHi=i;
    }
    if($(".imagecol").eq(i).css("height")<minH){
      minH = $(".imagecol").eq(i).css("height");
      minHi=i;
    }
  }
  width[maxHi] = width[maxHi]-0.25;
  width[minHi] = width[minHi]+0.25;
  $(".imagecol").eq(maxHi).css("width",(width[maxHi]+"%"))
  $(".imagecol").eq(minHi).css("width",(width[minHi]+"%"))
  }
  for(var i=0;i<3;i++){
    $(".imagecol").eq(i).css("height",minH);
  }
});

*{
  box-sizing:border-box;
}
.imagecol{
  width:33.33%;
  margin:0;
  padding:0;
  float:left;
}
.imagerow{
  width:100%;
  margin:0;
  padding:0;
}
.displayIm{
  width:100%;
  margin:0;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imagerow">
 <div class="imagecol">
  <img class="displayIm" src="https://media.zigcdn.com/media/content/2016/Feb/bike-of-the-year-pulsar-rs200-m_720x540.jpg" />
 </div>
 <div class="imagecol">
  <img class="displayIm" src="https://static.pexels.com/photos/50704/car-race-ferrari-racing-car-pirelli-50704.jpeg" />
 </div>
 <div class="imagecol">
  <img class="displayIm" src="http://www.iwallfinder.com/files/81/the-second-series-of-the-vertical-screen-flower-photo-40456.jpg" />
 </div>
</div>

Bootstrap：响应的等高图像行，宽度基于图像宽高比

2 个答案: