CSS:如何确保图像完全填满容器？

Question

我想确保图像填满其容器的整个空间。在 this codepen ，我怎样才能确保第一个图像按比例填充它的容器？如果发生一些裁剪，那没关系。要注意的是，我希望每个图像的宽度都保持 100%，因此图像尺寸会随着屏幕尺寸均匀缩小。

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

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

我的代码是:

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

 

    <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>

Answer 1

object-fit在table-cell中不起作用，你需要让元素成为 block 级元素，所以你可以设置它(inline )- block

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*/
}

<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>