如何使图像与 flexbox 完美契合？答案

【问题标题】：How to Have image fit in card perfectly with flexbox?如何使图像与 flexbox 完美契合？
【发布时间】：2021-01-31 03:39:53
【问题描述】：

我目前正在尝试在带有卡片的页面上列出我的所有产品。但是，这些图像在我的卡片中造成了奇怪的间隙。我已经尝试为图像添加最大高度，但这会使某些图像看起来太扁或太奇怪。除了手动调整我的图像大小之外，还有其他解决方法吗？

这是一种产品的示例。

  .products-center {
    /*have products take up 90% and center it*/
    width: 90vw;
    margin: 0 auto;
    max-width: 1170px;

    /*better than grid-template-columns: repeat(4, 1fr);*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 1.5rem;
    grid-row-gap: 2rem;
    
  }

  .product{
    box-shadow: 0 4px 5px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
  .img-container {
    position: relative;
    overflow: hidden;
    cursor:pointer;
  }

  .product-img {
    display:block;
    width: 100%;
    min-height: 15rem;
    transition: var(--mainTransition);
  }

    <div class='products-center'>
      <!-- single product -->
      <article class="product">
        <div class='img-container'>
          <img src="./images/blackberry-roll.jpg" alt="product" class='product-img'>
          <button class='bag-btn' data-id='1'>
            <i class='fas fa-shopping-cart'></i>
            add to cart
          </button>
          
        </div>
        <h3>Blackberry Bomb</h3>
        <h4>$3/roll</h4>
      </article>

      <!-- end of single product -->
    </div>

【问题讨论】：

最好的解决方案是让所有图像具有完全相同的比例。但是您可以通过将图像放在容器 div 中来绕过它，您可以为其设置大小并隐藏溢出。它应该可以解决问题，但当然只能看到具有垂直比例的图像的一部分。
正如@Dexter0015 指出的那样，您应该从所有图像的纵横比相同开始。如果这是不可能的，您可以设置一个高度并在img 元素上使用object-fit 属性，但是图像将被裁剪，并且可能无法按照您想要的方式裁剪。此外，您应该使用所有四个图像更新您的代码，以便我们提供解决方案。
你也可以使用object-fitcss属性：developer.mozilla.org/en-US/docs/Web/CSS/object-fit

标签： html css image flexbox

【解决方案1】：

这是一个在img-container 上设置max-height 并在img 上使用object-fit 的示例

.products-center {
  /*have products take up 90% and center it*/
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
  /*better than grid-template-columns: repeat(4, 1fr);*/
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-column-gap: 1.5rem;
  grid-row-gap: 2rem;
}

.product {
  box-shadow: 0 4px 5px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.img-container {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* RESPONSIVE BUT SETTING A MAX-HEIGHT */
  height: 100%;
  max-height: 300px;
}

.product-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  transition: var(--mainTransition);
  /* USING OBJECT FIT */
  object-fit: cover;
  object-position: center center;
}

<div class='products-center'>
  <!-- single product -->
  <article class="product">
    <div class='img-container'>
      <img src="https://via.placeholder.com/300x300" alt="product" class='product-img'>
      <button class='bag-btn' data-id='1'>
            <i class='fas fa-shopping-cart'></i>
            add to cart
          </button>

    </div>
    <h3>Blackberry Bomb</h3>
    <h4>$3/roll</h4>
  </article>

  <article class="product">
    <div class='img-container'>
      <img src="https://via.placeholder.com/500x300" alt="product" class='product-img'>
      <button class='bag-btn' data-id='1'>
            <i class='fas fa-shopping-cart'></i>
            add to cart
          </button>

    </div>
    <h3>Blackberry Bomb</h3>
    <h4>$3/roll</h4>
  </article>


  <article class="product">
    <div class='img-container'>
      <img src="https://via.placeholder.com/500x700" alt="product" class='product-img'>
      <button class='bag-btn' data-id='1'>
            <i class='fas fa-shopping-cart'></i>
            add to cart
          </button>

    </div>
    <h3>Blackberry Bomb</h3>
    <h4>$3/roll</h4>
  </article>

  <article class="product">
    <div class='img-container'>
      <img src="https://via.placeholder.com/700x500" alt="product" class='product-img'>
      <button class='bag-btn' data-id='1'>
            <i class='fas fa-shopping-cart'></i>
            add to cart
          </button>

    </div>
    <h3>Blackberry Bomb</h3>
    <h4>$3/roll</h4>
  </article>


  <!-- end of single product -->
</div>

【讨论】：