纯CSS实现响应式卡片

先定义基本的html标签，我使用的无序列表。

<ul class="card-wrapper">
  <li class="card">
    <img src="../myfile/images/1.jpg" alt="">
    <h3>A Super Wonderful Headline</h3>
    <p>Lorem ipsum sit dolor amit</p>
  </li>
  <!-- 其它li -->
</ul>

接下来使用网格布局创建基本的样式，并去掉列表的默认样式

.card-wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
  grid-gap: 1.5rem;
}
.card {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.45);
  padding-bottom: 1rem;
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3 {
  margin-top: 1rem;
  font-size: 1.25rem;
}

img {
  border-radius: 0.5rem 0.5rem 0 0;
  width: 100%;
}

img ~ * {
  margin-left: 1rem;
  margin-right: 1rem;
}

这个是目前的效果

接下来我们要统一一下图片的大小和图片自适应的高度变化，可以使用 max 方法，防止用户视口设置的太大或者太小导致图片高度影响布局，需要在 img 标签样式里面添加2个样式

img {
  /* 省略之前的样式 */
  object-fit: cover;
  height: max(10rem, 30vh);
}

根据高度的变化会影响图片的高度变化，但不会缩放的太大或者太小。

如果浏览器支持 aspect-ratio 属性的话，也可以把 height 替换一下

img {
  /* 省略之前的样式 */
  object-fit: cover;
  aspect-ratio：4/3;
}

可以根据自己的项目需求去设置的比例。