CSS 图片完整设置指南（最全常用属性 + 实用场景 + 避坑技巧）

.parent { /* 图片的父盒子 */
  text-align: center;
}

✅ 情况 2：img 标签的图片 水平 + 垂直 居中（万能居中方案）

方案 A：flex 弹性布局（推荐，代码最少，现代开发首选）

.parent { /* 父容器 */
  width: 500px;
  height: 400px;
  display: flex;          /* 开启flex */
  justify-content: center;/* 水平居中 */
  align-items: center;    /* 垂直居中 */
}
.parent img {
  width: 200px;
}

四、背景图片（background）的核心设置

• <img> 标签：用于内容型图片（比如文章配图、产品图、用户头像，页面核心内容）
• background：用于装饰型图片（比如页面背景、卡片底纹、图标，非核心内容）

🔥 背景图核心必学属性（组合使用，缺一不可）

.box {
  width: 100%;
  height: 300px; /* 背景图生效前提：盒子必须有宽高！！ */
  /* 1. 设置背景图地址 */
  background-image: url("./images/bg.jpg");
  /* 2. 是否平铺（必设，默认会平铺整个盒子） */
  background-repeat: no-repeat; /* 不平铺 ✅ 最常用 */
  /* 可选值：repeat(默认平铺) | repeat-x(水平平铺) | repeat-y(垂直平铺) */
  /* 3. 背景图位置（水平 垂直），默认左上角 */
  background-position: center center; /* 居中显示 ✅ 最常用 */
  /* 4. 背景图尺寸（控制填充方式，和img的object-fit类似） */
  background-size: cover; /* 铺满盒子+裁剪多余，不变形 ✅ 最常用 */
  /* 可选值：contain(完整显示+留白) | 100% 100%(拉伸变形) | 300px 200px(固定尺寸) */
}

✅ 背景图简写语法（推荐，一行写完，省代码）

.box {
  width: 100%;
  height: 300px;
  /* 顺序：图片地址 → 平铺 → 位置 → 尺寸 */
  background: url("./images/bg.jpg") no-repeat center / cover;
}

五、图片的裁剪、缩放、禁止拖动（实用小技巧）

1. 图片裁剪（隐藏超出部分）

.parent {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden; /* 超出的图片部分隐藏，实现圆形裁剪 */
}
.parent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img {
  transition: all 0.3s; /* 过渡动画，放大更丝滑 */
}
img:hover {
  transform: scale(1.05); /* 放大1.05倍 */
  /* transform: scale(0.95); 缩小到0.95倍 */
}

img {
  user-select: none; /* 禁止选中 */
  pointer-events: none; /* 禁止鼠标事件（可选） */
  -webkit-user-drag: none; /* 禁止拖动（webkit内核浏览器，Chrome/Safari） */
}