Question

我想确保图像填满其容器的整个空间。在this codepen中，如何确保第一张图片按比例填充容器？如果发生一些裁剪，那就没问题。问题是，我希望每个宽度保持100％，因此图像大小可以随屏幕尺寸平均缩小。

我尝试了object-fit的所有选项，但没有解决问题。

在这种情况下，不希望使用background-image。

我的代码是：

＆＃13;

td {
  border: 2px solid red;
   max-width:400px;
}
.shopping-cart-img {
    width: 100%;
    object-fit: cover;
    background-size: contain;
}

＆＃13;

    <table>
      <tr>
        <td>
          <a href="www.google.com">
            <img class="shopping-cart-img" src="https://dev.horizonhomes-samui.com/wp-content/uploads/2017/07/1.jpg" alt="">
          </a>
        </td>
            <td>
          <a href="www.google.com">
            <img class="shopping-cart-img" src="https://dev.horizonhomes-samui.com/wp-content/uploads/2017/09/1-2.jpg" alt="">
          </a>
        </td>
      </tr>
    </table>

＆＃13;

Answer 1

object-fit无法在table-cell中工作，您需要将元素设置为块级元素，因此您可以将其设置为(inline)-block

＆＃13;

td {
  border: 2px solid red;
  max-width: 400px;
  display: block
}

/* Desktop sizes (above 600px) */

.shopping-cart-img {
  max-width: 100%;
  object-fit: cover;
  display: block /* remove white-space from inline elements*/
}

＆＃13;

<table>
  <tr>
    <td>
      <a href="www.google.com">
        <img class="shopping-cart-img" src="https://dev.horizonhomes-samui.com/wp-content/uploads/2017/07/1.jpg" alt="">
      </a>
    </td>
    <td>
      <a href="www.google.com">
        <img class="shopping-cart-img" src="https://dev.horizonhomes-samui.com/wp-content/uploads/2017/09/1-2.jpg" alt="">
      </a>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

为您的父元素指定一些高度，宽度和高度为图像的100％。

CSS：如何确保图像完全填充容器？

2 个答案: