CSS技术问询：如何让图片按比例填满容器且宽度保持100%

我懂你的需求——想让表格里的图片按比例填满单元格，允许裁剪，同时宽度100%跟着屏幕缩放，还不想用背景图。之前试了object-fit没效果，问题其实出在表格单元格（td）的高度没有被约束住，导致object-fit没法发挥作用。

下面给你一套可行的修改方案，一步步来：

核心思路 #

表格单元格默认是由内容撑高度的，我们需要给td设置固定的宽高比，再让图片绝对定位填满整个单元格，这样object-fit: cover就能正常工作，实现按比例裁剪填满的效果。

修改后的代码 #

首先是CSS部分：

td {
  border: 2px solid red;
  max-width: 400px;
  position: relative; /* 让内部元素可以绝对定位 */
  padding-top: 100%; /* 这里设置宽高比，100%就是正方形，16:9的话是56.25%，按需调整 */
  overflow: hidden; /* 裁剪超出部分 */
}

.shopping-cart-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 按比例裁剪填满容器 */
}

td a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 让a标签填满整个td，保证点击区域完整 */
  display: block;
}

然后是HTML部分（和你原来的结构一致，无需调整）：

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

为什么之前的代码没生效？ #

你之前的代码里，td没有固定的高度限制，图片的高度会跟着自身的原始比例自动撑开td，这时候object-fit: cover相当于没起作用——因为图片本身就占满了td的高度，不需要裁剪。而我们通过padding-top给td设置了基于宽度的比例高度，再用绝对定位让图片填满这个固定比例的容器，object-fit: cover就会自动裁剪图片，让它按比例填满整个单元格，同时宽度100%随屏幕缩放。

你可以根据需求调整padding-top的数值来改变宽高比，比如想做4:3的比例就设置75%，灵活得很~

内容的提问来源于stack exchange，提问作者cag8f