Question

我所有的＆＃39; li＆＃39;设置为240w X 260h，内部我有一张可以达到240w X 140H的图片我想让图像适合div.photo而不是图片＆＃39;大小，但我们说我将我的图片大小更改为200wX140，布局正在改变所有的＆＃39; li＆＃39;不再具有相同的高度

jfiddle：需要调整结果大小＆＃39;帧

  <ul class="grid" masonry="true">
    <li ng-repeat="item in items | filter: { name: nameFilter } | orderBy: order">
      <div class="photo text-center">
        <img src="{{item.picture}}" style="">
      </div>
    <div class="photo-description">
      <span>{{item.name}} </span><br/>
      <span>{{item.age}}</span><br/>
      <span class="label label-info">{{item.id}}</span>
    </div>

    </li>
  </ul>

CSS

.grid li {
    display: inline-block;
    min-width: 240px;
    min-height: 260px;
    width: 240px;
    height: 260px;
    margin: 0 0 10px 10px;

}

Answer 1

您所要做的就是确保显示的图像不高于提供的高度。如果是，则需要在显示之前缩小图像。我会保留li标签，但限制img height属性，如：

<img src="http://www.tnetnoc.com//hotelimages/053/343053/2631759-Ramada-Hotel-and-Suites-Vienna-Meeting-Room-12.jpg"  height="140">

用图像设置相同的高度'li'

1 个答案: