需求分析

现在有这样一个需求，在一个页面展示数据，页面的数据通过卡片的形式展示，卡片中内容主要分为三部分，最上面个标题，中间是个图片，最下面是一排操作按钮。

这里的卡片可以保证固定的宽高比例
卡片可以随着窗口大小的变化做到自适应大小变化
实际图片的高度和宽度不一致，显示的的时候可以自适应大小，填充整个容器

实际实现

首先，我们定义一个.card 类，在这个类定义了卡片的样式，包括宽度、内边距、边框、圆角、阴影和背景色。.card img 的样式设置了图片的宽度为100%，高度自适应。为了使按钮等间距排列，使用了 display: flex; 和 justify-content: space-around; 来实现。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .card {
      width: 300px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;  /* 圆角卡片 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);/* 阴影效果 */
      background-color: #fff;  /* 卡片背景色 */
      text-align: center; /* 让内容居中 */
    }

    .card img {
      width: 100%; /* 图片宽度充满父容器 */
      height: auto; /* 根据宽度等比例调整高度 */
      border-radius: 5px; /* 图片也可设置圆角 */
      margin-bottom: 10px; /* 图片下方留一些空间 */
    }

    .buttons {
      display: flex;
      justify-content: space-around; /* 按钮等间距排列 */
    }

    .button {
      padding: 8px 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
  <title>Rounded Card</title>
</head>
<body>
  <div class="card">
    <h2>Card Title</h2>
    <img src="your-image.jpg" alt="Card Image">
    <div class="buttons">
      <button class="button">Button 1</button>
      <button class="button">Button 2</button>
      <button class="button">Button 3</button>
    </div>
  </div>
</body>
</html>

如果希望无论图片的原始大小如何，它们可以自适应容器的大小，可以使用 object-fit 属性，将图片进行拉伸或缩放以适应固定的高度和宽度。在这种情况下，将图片的宽度和高度都设置为100%。

我们修改一下样式，给.card img 的样式设置 object-fit: cover;，这会拉伸或缩放图片以填充整个容器，同时保持其宽高比。

进一步修改的代码

css 复制代码

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 拉伸或缩放图片以适应容器 */
  border-radius: 5px;
  margin-bottom: 10px;
}

卡片自适应改变大小

如果希望卡片能够在页面窗口大小变化时自适应改变大小，你可以使用百分比单位或者相对单位来设置卡片的宽度，以及使用 max-width 或 min-width 来限制卡片的大小。示例代码：

css 复制代码

.card {
  width: 80%; /* 使用百分比或者相对单位 */
  max-width: 400px; /* 设置最大宽度 */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  text-align: center;
  margin: 0 auto; /* 居中显示 */
}

卡片固定宽高比例

这时候有问题，因为修改了自适应大小变化，可能会导致卡片的高度随着图片的高度变化而变化，这时候我们选用固定卡片的宽高比例。示例代码：

css 复制代码

.card {
  width: 80%;
  max-width: 400px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  text-align: center;
  aspect-ratio: 1; /* 1:1 比例，可以根据需要调整 */
  margin: 0 auto;
}

在某些浏览器中，aspect-ratio 属性可能需要使用浏览器前缀。以下是一些主要浏览器的前缀示例：

css 复制代码

.card {
  width: 80%;
  max-width: 400px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  text-align: center;

  /* 使用浏览器前缀 */
  aspect-ratio: 1;        /* 标准写法 */
  -webkit-aspect-ratio: 1; /* Chrome 和 Safari */
  -moz-aspect-ratio: 1;    /* Firefox */
  -ms-aspect-ratio: 1;     /* Internet Explorer */
  -o-aspect-ratio: 1;      /* Opera */
  margin: 0 auto;
}

【前端】做一个展示卡片样式数据的页面，解决卡片中图片高度不一致问题

需求分析

实际实现

卡片自适应改变大小

卡片固定宽高比例