如何让不同宽高比的图片适配固定尺寸card容器且不被裁剪

你可以根据实际业务场景选择以下两种方案：

方案1：纯CSS实现（无需预处理图片，优先推荐） #

不需要修改原图尺寸比例，仅靠CSS属性即可实现「图片完整不裁剪+展示尺寸统一」的需求，代码如下：
首先修正你原有.card样式的语法问题（width属性后漏写分号），补充对应图片样式：

.card {
  width: 270px;
  height: 400px;
  /* 可选配置：让图片在card内居中展示 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可选配置：填充图片适配后留白区域的背景色 */
  background: #f5f5f5;
  overflow: hidden;
}

.card-img {
  max-width: 100%;
  max-height: 100%;
  /* 核心属性：保证图片完整显示，自动适配容器尺寸不裁剪 */
  object-fit: contain;
}

如果需要兼容IE等不支持object-fit的老旧浏览器，可以把img标签替换为div背景图的形式实现，效果完全一致：
HTML修改示例：

<div class="card">
  <div class="card-img" style="background-image: url('img-1.jpg')"></div>
</div>

对应CSS：

.card-img {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

方案2：按你原有思路预处理图片配合CSS实现 #

如果你希望图片本身没有留白，可以按你原来的思路操作：

1. 预处理阶段：把所有图片统一处理为和card相同的宽高比（270:400=27:40），处理时不要裁剪图片内容，在图片上下/左右补充白色/透明背景补到对应比例即可
2. CSS部分按你原本的思路配置即可：

.card-img {
  width: 100%;
  height: auto;
}

该方案的优点是图片本身没有额外留白，不需要依赖card的背景色适配，但需要提前处理所有图片资源，后续新增图片也需要按相同规则处理，维护成本高于方案1。

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