使用html和css修复图像网格

Question

我试图使用html和CSS创建一个固定的图像网格，但是图像网格是基于图像大小的大小。我在前端不是很好，我添加了当前显示方式的图像，以及我希望它显示的方式。请帮我把这件事做好。谢谢。

现在是这样的

应该是这样

** HTML**

      <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="product-grid">
                    <div class="product-image">
                        <a href="#">
                            <img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
                            <img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg">
                        </a>
                        <ul class="social">
                            <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li>
                            <li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li>
                            <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li>
                        </ul>
                        <span class="product-new-label">Sale</span>
                        <span class="product-discount-label">20%</span>
                    </div>
                    <ul class="rating">
                        <li class="fa fa-star"></li>
                        <li class="fa fa-star"></li>
                        <li class="fa fa-star"></li>
                        <li class="fa fa-star"></li>
                        <li class="fa fa-star disable"></li>
                    </ul>
                    <div class="product-content">
                        <h3 class="title"><a href="#">Women's Blouse</a></h3>
                        <div class="price">$16.00
                            <span>$20.00</span>
                        </div>
                        <a class="add-to-cart" href="">+ Add To Cart</a>
                    </div>
                </div>
            </div>
        </div>

CSS (用于图像部分)

.product-grid {
  font-family: Raleway,sans-serif;
  text-align: center;
  padding: 0 0 72px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.product-grid .product-image {
  position: relative;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}
.product-grid .product-image a {
  display: block;
}
.product-grid .product-image img {
  width: 100%;
  height: auto;
}
.product-grid .pic-1 {
  opacity: 1;
  -webkit-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
}
.product-grid:hover .pic-1 {
  opacity: 1;
}
.product-grid .pic-2 {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
}
.product-grid:hover .pic-2 {
  opacity: 1;
}

Answer 1

重新写了你的CSS。有两个窍门。一个具有object-fit: cover;，另一个具有内部元素的padding。

.product-grid {
  font-family: Raleway,sans-serif;
  text-align: center;
  padding: 0 0 72px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.product-grid .product-image {
  position: relative;
  -webkit-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
  overflow: hidden; /* hiding parts of image */
}
/* this will help you to add a flexible height, based on width of a parent */
.product-grid .product-image::before {
  content: '';
  display: block;
  position: relative;
  padding-top: 133%;
  width: 100%;
  height: auto;
}
.product-grid .product-image a {

}
/* all this code will make img to act like background image */
.product-grid .product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
}
.product-grid .pic-1 {
  opacity: 1;
  -webkit-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
}
.product-grid:hover .pic-1 {
  opacity: 1;
}
.product-grid .pic-2 {
  opacity: 0;
  -webkit-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
}
.product-grid:hover .pic-2 {
  opacity: 1;
}

如果不希望图像被裁剪-您可以将object-fit: cover;更改为object-fit: contain;。