需求分析
现在有这样一个需求，在一个页面展示数据，页面的数据通过卡片的形式展示，卡片中内容主要分为三部分，最上面个标题，中间是个图片，最下面是一排操作按钮。
- 这里的卡片可以保证固定的宽高比例
- 卡片可以随着窗口大小的变化做到自适应大小变化
- 实际图片的高度和宽度不一致，显示的的时候可以自适应大小，填充整个容器
实际实现
首先，我们定义一个.card 类，在这个类定义了卡片的样式，包括宽度、内边距、边框、圆角、阴影和背景色。.card img 的样式设置了图片的宽度为100%，高度自适应。为了使按钮等间距排列，使用了 display: flex; 和 justify-content: space-around; 来实现。
<!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;，这会拉伸或缩放图片以填充整个容器，同时保持其宽高比。
进一步修改的代码
.card img {
width: 100%;
height: 100%;
object-fit: cover; /* 拉伸或缩放图片以适应容器 */
border-radius: 5px;
margin-bottom: 10px;
}卡片自适应改变大小
如果希望卡片能够在页面窗口大小变化时自适应改变大小，你可以使用百分比单位或者相对单位来设置卡片的宽度，以及使用 max-width 或 min-width 来限制卡片的大小。示例代码：
.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; /* 居中显示 */
}卡片固定宽高比例
这时候有问题，因为修改了自适应大小变化，可能会导致卡片的高度随着图片的高度变化而变化，这时候我们选用固定卡片的宽高比例。 示例代码：
.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 属性可能需要使用浏览器前缀。以下是一些主要浏览器的前缀示例：
.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;
}