CSS：列内高度相等的图像

Question

我在列内有相同高度图像的问题。 我想要我的书-img div，这行上最高的图像。

这是我的示例代码。

/* Book List Styles */
.book-container {
  position: relative;
  background: #eeeeee;
  margin-bottom: 30px;
  overflow: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.book-container:hover {
  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.3);
}

.book-container:hover .book-info a {
  color: #ff9606;
}

.book-container:hover .add-cart2 {
  border-color: #ff9606;
  background: #ff9606;
  color: #ffffff!important;
}

.book-img {
  background: white;
  background-image: url('http://test5.netholding.com/assets/plugins/application/images/bg-b.png');
  overflow: hidden;
  border: 2px solid #eee;
}

.mini-book-img{
  background: white;
  background-image: url('http://test5.netholding.com/assets/plugins/application/images/bg-b.png');
  width: 100%;
  height: auto;
  min-height: 242px;
  overflow: hidden;
  border: 2px solid #eee;
}

.book-img img, .mini-book-img img {
  display: block;
  width: 100%;
}

.ribbon-wrap {
  position: absolute;
  top: 10px;
  left: 0;
}

.ribbon {
  background: #ff9606;
  display: inline-block;
  font-size: 11px;
  font-style: italic;
  font-weight: bolder;
  line-height: normal;
  padding: 3px 0px 2px;
  position: relative;
  border-top-left-radius: 3px;
  color: #fff;
  margin-bottom: 5px;
  width: 55px;
  text-align: center;
}

.ribbon:before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 6px 0 0;
  border-color: #ff9606 transparent transparent transparent;
  position: absolute;
  content: "";
  right: -6px;
  top: 0;
}

.ribbon:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 0 6px;
  border-color: transparent transparent transparent #ff9606;
  position: absolute;
  content: "";
  right: -6px;
  bottom: 0;
}

.book-info, .mini-book-info {
  text-align: center;
  padding: 23px 5px 30px;
}

.book-info small, .mini-book-info small {
  display: block;
  margin-bottom: 15px;
  font-size: 0.8125em;
  font-style: normal;
  font-weight: normal;
  color: #888;
}

.book-info h2 a, .mini-book-info h2 a  {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  height: 18px*24px*3; /* Fallback for non-webkit */
  min-height: 75px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
  text-decoration: none;
  /* Max 3 row */
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.book-info span {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  display: block;
  color: #ff9606;
  font-weight: bold;
  font-size: 1.125em;
}

.mini-book-info span{
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  display: block;
  color: #ff9606;
  font-weight: bold;
  font-size: 1em;
}

.book-info span del, .mini-book-info span del {
  color: #333333;
  margin-right: 10px;
  font-weight: normal;
  display: inline-block;
}

.add-cart2 {
  text-decoration: none!important;
  font-size: 1em;
  font-weight: 800;
  line-height: normal;
  color: #333!important;
  border: 1px solid #333333;
  padding: 6px 12px 7px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.bg{
  background: orange;
}

.bg2{
  background: orangered;
}

<div class="container">
  <div class="row">
    
    <div class="col-md-3 bg">
      <div class="book-container">
        <div class="book-img">
          <a href="#" alt="Kitap İsmi">
            <img src="http://test5.netholding.com/assets/plugins/application/images/book1.jpg" class="img-responsive" alt="Kitap adı buraya gelecek">
          </a>
          <div class="ribbon-wrap">
            <span class="ribbon">YENİ</span>
          </div>
        </div>
        <div class="book-info">
          <small>ROMAN</small>
          <h2><a href="#" title="Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve Musa Dağı Ermenileri">Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve</a></h2>
          <span><del>35.00</del> 25.00 TL</span>
          <a href="#" class="add-cart2">SEPETE EKLE</a>
        </div>
      </div>
    </div>
    
    <div class="col-md-3 bg2">
      <div class="book-container">
        <div class="book-img">
          <a href="#" alt="Kitap İsmi">
            <img src="http://test5.netholding.com/assets/plugins/application/images/book2.jpg" class="img-responsive" alt="Kitap adı buraya gelecek">
          </a>
          <div class="ribbon-wrap">
            <span class="ribbon">YENİ</span>
          </div>
        </div>
        <div class="book-info">
          <small>ROMAN</small>
          <h2><a href="#" title="Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve Musa Dağı Ermenileri">Antakya</a></h2>
          <span><del>35.00</del> 25.00 TL</span>
          <a href="#" class="add-cart2">SEPETE EKLE</a>
        </div>
      </div>
    </div>
    
    <div class="col-md-3 bg">
      <div class="book-container">
        <div class="book-img">
          <a href="#" alt="Kitap İsmi">
            <img src="http://bzy-web.netholding.com/content/ProductImg/Medium/troja-results-of-the-latest-researches-and-discoveries-on-the-site-of-homers-troy-1181.jpg" class="img-responsive" alt="Kitap adı buraya gelecek">
          </a>
          <div class="ribbon-wrap">
            <span class="ribbon">YENİ</span>
          </div>
        </div>
        <div class="book-info">
          <small>ROMAN</small>
          <h2><a href="#" title="Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve Musa Dağı Ermenileri">Antakya, İskenderun ve Musa Dağı Ermenileri Antakya</a></h2>
          <span><del>35.00</del> 25.00 TL</span>
          <a href="#" class="add-cart2">SEPETE EKLE</a>
        </div>
      </div>
    </div>
    
    
    <div class="col-md-3 bg2">
      <div class="book-container">
        <div class="book-img">
          <a href="#" alt="Kitap İsmi">
            <img src="http://test5.netholding.com/assets/plugins/application/images/book3.jpg" class="img-responsive" alt="Kitap adı buraya gelecek">
          </a>
          <div class="ribbon-wrap">
            <span class="ribbon">YENİ</span>
          </div>
        </div>
        <div class="book-info">
          <small>ROMAN</small>
          <h2><a href="#" title="Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve Musa Dağı Ermenileri">Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve</a></h2>
          <span><del>35.00</del> 25.00 TL</span>
          <a href="#" class="add-cart2">SEPETE EKLE</a>
        </div>
      </div>
    </div>
    
    
    
    
    
    
    
    
    
    
    <div class="col-md-3 bg">
      <div class="book-container">
        <div class="book-img">
          <a href="#" alt="Kitap İsmi">
            <img src="http://test5.netholding.com/assets/plugins/application/images/book1.jpg" class="img-responsive" alt="Kitap adı buraya gelecek">
          </a>
          <div class="ribbon-wrap">
            <span class="ribbon">YENİ</span>
          </div>
        </div>
        <div class="book-info">
          <small>ROMAN</small>
          <h2><a href="#" title="Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve Musa Dağı Ermenileri">Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve</a></h2>
          <span><del>35.00</del> 25.00 TL</span>
          <a href="#" class="add-cart2">SEPETE EKLE</a>
        </div>
      </div>
    </div>
    
    <div class="col-md-3 bg2">
      <div class="book-container">
        <div class="book-img">
          <a href="#" alt="Kitap İsmi">
            <img src="http://test5.netholding.com/assets/plugins/application/images/book2.jpg" class="img-responsive" alt="Kitap adı buraya gelecek">
          </a>
          <div class="ribbon-wrap">
            <span class="ribbon">YENİ</span>
          </div>
        </div>
        <div class="book-info">
          <small>ROMAN</small>
          <h2><a href="#" title="Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve Musa Dağı Ermenileri">Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve</a></h2>
          <span><del>35.00</del> 25.00 TL</span>
          <a href="#" class="add-cart2">SEPETE EKLE</a>
        </div>
      </div>
    </div>
    
    <div class="col-md-3 bg">
      <div class="book-container">
        <div class="book-img">
          <a href="#" alt="Kitap İsmi">
            <img src="http://test5.netholding.com/assets/plugins/application/images/book3.jpg" class="img-responsive" alt="Kitap adı buraya gelecek">
          </a>
          <div class="ribbon-wrap">
            <span class="ribbon">YENİ</span>
          </div>
        </div>
        <div class="book-info">
          <small>ROMAN</small>
          <h2><a href="#" title="Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve Musa Dağı Ermenileri">Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve</a></h2>
          <span><del>35.00</del> 25.00 TL</span>
          <a href="#" class="add-cart2">SEPETE EKLE</a>
        </div>
      </div>
    </div>
    
    
    <div class="col-md-3 bg2">
      <div class="book-container">
        <div class="book-img">
          <a href="#" alt="Kitap İsmi">
            <img src="http://test5.netholding.com/assets/plugins/application/images/book4.jpg" class="img-responsive" alt="Kitap adı buraya gelecek">
          </a>
          <div class="ribbon-wrap">
            <span class="ribbon">YENİ</span>
          </div>
        </div>
        <div class="book-info">
          <small>ROMAN</small>
          <h2><a href="#" title="Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve Musa Dağı Ermenileri">Antakya, İskenderun ve Musa Dağı Ermenileri Antakya, İskenderun ve</a></h2>
          <span><del>35.00</del> 25.00 TL</span>
          <a href="#" class="add-cart2">SEPETE EKLE</a>
        </div>
      </div>
    </div>
    
  </div>
</div>

Example

我哪里错了？

Answer 1

也许把这个css放到你的书-img div min-height: 200px; max-height: 250px; background-size: cover; background-position: top center;