transform-origin属性无法生效，图片轮播显示异常求助

刚接触transform-origin属性，制作简易图片轮播时遇到问题：其中一张图片宽高比和其他图片不同，导致图片仅显示左上角，不符合预期的中心点显示效果。查资料知道transform-origin能解决，但给第二张图片设置不同的transform-origin值后，完全没改变图片的中心点，求解决方向。

相关代码 #

HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Saphrel</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header class="header">
      <h1 class="logo-title">Saphrel</h1>
      <nav class="main-nav">
        <ul class="main-nav-list">
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Our Story</a></li>
          <li><a href="#">Locations</a></li>
          <li><a href="#">Reservations</a></li>
        </ul>
      </nav>
    </header>

    <section aria-label="Newest Photos">
      <div class="slider">
        <ul>
          <li class="slide">
            <img
              src="https://cdn.pixabay.com/photo/2016/11/18/14/05/brick-wall-1834784_960_720.jpg"
              alt="Picture of Restaurant"
            />
          </li>
          <li class="slide">
            <img
              class="img-2"
              src="https://images.pexels.com/photos/370984/pexels-photo-370984.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="Picture of Wine Glass and Dish"
            />
          </li>
          <li class="slide">
            <img
              src="https://images.pexels.com/photos/6267/menu-restaurant-vintage-table.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
              alt="Picture of Wine Glass"
            />
          </li>
        </ul>
      </div>
    </section>
    <h1>test</h1>
  </body>
</html>

CSS（Slider核心部分） #

/***********************/
/* Slider */
/***********************/
.slide {
  height: 80rem;
}
.slide img {
  float: left;
  width: 100%;
  height: 90rem;
  object-fit: cover;
}
.img-2 {
  transform-origin: bottom right;
}

解决方案 #

核心问题 #

transform-origin属性只对应用了transform变换的元素生效，你现在只设置了transform-origin但没有给图片添加任何transform相关样式（比如scale、rotate、translate等），所以这个属性完全不会起作用。

另外，你当前的图片显示问题是宽高比不匹配导致的裁剪偏移，本质是object-fit: cover的裁剪规则，和transform-origin无关——transform-origin管的是变换动作的原点，不是图片的裁剪对齐点。

正确解决图片显示问题的方法 #

如果想让不同宽高比的图片在轮播容器里按预期位置显示（比如显示中心区域，而非左上角），应该修改object-position属性：

.img-2 {
  object-position: center; /* 也可以设置成你想要的位置，比如bottom right */
}

默认object-position是50% 50%（中心对齐），如果你的图片显示左上角，可能是其他样式冲突，明确设置即可覆盖。

关于transform-origin的正确用法 #

如果之后需要对图片做变换（比如缩放、旋转），再配合transform-origin使用：

.img-2 {
  transform-origin: bottom right;
  transform: scale(0.8); /* 示例：添加一个缩放变换，此时原点设置才会生效 */
}

额外布局优化 #

当前轮播容器和图片高度不一致（.slide是80rem，图片是90rem），建议统一高度避免布局混乱：

.slide {
  height: 80rem;
  overflow: hidden; /* 裁剪超出容器的部分 */
}
.slide img {
  width: 100%;
  height: 100%; /* 和容器高度保持一致 */
  object-fit: cover;
}

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