html - 设置与图像相同的高度 'li' s

Question

我所有的“li”都设置为 240w X 260h，里面我有一张可以达到 240w X 140H 的图片将我的图片大小更改为 200wX140 布局正在更改所有“li”不再具有相同的高度

jfiddle : 需要调整“结果”框架的大小

  <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 高度属性，例如:

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