如何倾斜带图片的子div并使其保持在父容器范围内？

核心问题分析 #

直接给子元素应用skew变换会改变元素的几何边界，导致其超出父容器范围，同时flex布局的空间分配会被变形后的元素打乱，无法实现整齐的倾斜排列效果。

解决方案 #

采用嵌套容器+反向变换的方式：外层容器负责倾斜造型，内层容器承载图片并反向倾斜还原图片比例，同时给父容器添加溢出隐藏，控制整体范围。

完整代码实现

<div class="parent">
  <div class="child">
    <div class="img-wrapper">
      <img src="你的图片地址" alt="图片描述">
    </div>
  </div>
  <div class="child">
    <div class="img-wrapper">
      <img src="你的图片地址" alt="图片描述">
    </div>
  </div>
  <div class="child">
    <div class="img-wrapper">
      <img src="你的图片地址" alt="图片描述">
    </div>
  </div>
</div>

.parent {
  display: flex;
  justify-content: space-between;
  overflow: hidden; /* 隐藏子元素溢出部分 */
  width: 100%; /* 确保父容器占满可用宽度 */
}

.child {
  width: 31%; /* 调整宽度，留出倾斜后的空间 */
  height: 375px;
  transform: skew(-15deg); /* 根据需求调整倾斜角度 */
  overflow: hidden;
  background: #ccc; /* 占位背景，可替换 */
}

.img-wrapper {
  width: 100%;
  height: 100%;
  transform: skew(15deg); /* 反向倾斜，还原图片正常比例 */
  transform-origin: center;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片填充容器不变形 */
}

关键调整说明 #

• 父容器添加overflow: hidden，彻底截断子元素溢出的部分
• 子元素使用略小于原30%的宽度（比如31%），避免倾斜后相邻元素重叠
• 内层img-wrapper应用反向角度的skew，让图片保持正常比例，不会跟着倾斜变形
• 使用object-fit: cover确保图片填充容器，避免拉伸或留白

内容的提问来源于stack exchange，提问作者Nikerstriker