模板:人物卡片/styles.css

/* 为卡片添加滚动效果 */
.人物卡片-container {
  display: flex; /* 使用flex布局，使子元素在一行内排列 */
  overflow-x: auto; /* 当内容超出容器时，允许在x轴（水平）上滚动 */
  white-space: nowrap; /* 确保内容不会换行 */
}

.人物卡片 {
  display: inline-block; /* 元素以内联块的方式展示 */
  width: 150px; /* 卡片的宽度 */
  margin: 5px; /* 卡片间的距离 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 卡片的阴影效果 */
  border: 1px solid #ddd; /* 卡片的边框 */
  border-radius: 5px; /* 边框圆角 */
  text-align: center; /* 文本居中显示 */
}

.人物图片 {
  width: 100px;  /* 图片容器的宽度 */
  height: 100px;  /* 图片容器的高度 */
  overflow: hidden; /* 隐藏超出容器的部分，实现图片的裁剪效果 */
  margin: 0 auto; /* 水平居中图片容器 */
  position: relative; /* 设置为相对定位，为了子元素（图片）的绝对定位 */
}

.人物图片 img {
  min-width: 100%;  /* 图片至少与容器同宽 */
  min-height: 100%;  /* 图片至少与容器同高 */
  object-fit: cover; /* 保证横版图片在手机浏览器正常裁切为正方形 */
  width: auto;  /* 自动调整图片宽度 */
  height: auto;  /* 自动调整图片高度 */
  display: block; /* 图片块级显示 */
  position: absolute; /* 图片基于其父元素的相对定位进行绝对定位 */
  top: 50%; /* 垂直居中图片 */
  left: 50%; /* 水平居中图片 */
  transform: translate(-50%, -50%); /* 与上面两行配合，确保图片完全居中 */
}

.人物信息 {
  padding: 5px; /* 文本信息的内部间距 */
}

/* 关系文本的样式 */
.relation-text {
  color: #888; /* 浅灰色显示文本 */
  font-weight: normal; /* 文本不加粗 */
}