窗口调整大小时，如何让登录页左侧图片优先显示左侧区域？

问题根源 #

你给容器#logoindex添加了scaleX(-1)水平翻转属性，这会导致容器内的图片和溢出裁剪逻辑都被镜像反转——原本容器overflow:hidden会截掉图片超出右侧的部分，翻转后变成截掉图片超出左侧的部分，所以窗口缩小时只会显示原图片的右侧区域。

可选解决方案 #

方案1：移除容器翻转，直接控制图片显示位置

这是最直接的修复方式，去掉不必要的容器翻转，通过图片的object-position属性强制优先显示左侧：

#logoindex {
  width: 50%;
  height: 100vh;
  float: left;
  background-color: black;
  overflow: hidden;
}

#logoindex img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并覆盖容器 */
  object-position: left center; /* 固定图片靠左对齐，优先显示左侧 */
}

对应的HTML保持不变：

<div id="logoindex">
  <img src="https://via.placeholder.com/300">
</div>

方案2：若需图片镜像效果，仅翻转图片而非容器

如果你的设计确实需要图片呈现镜像状态，把翻转属性移到img标签上，容器保持正常的溢出逻辑：

#logoindex {
  width: 50%;
  height: 100vh;
  float: left;
  background-color: black;
  overflow: hidden;
}

#logoindex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1); /* 仅对图片做镜像翻转 */
}

方案3：改用背景图实现（更简洁的控制方式）

把图片设为容器的背景图，通过background-position直接指定显示区域：

#logoindex {
  width: 50%;
  height: 100vh;
  float: left;
  background-color: black;
  background-image: url('https://via.placeholder.com/300');
  background-size: cover; /* 保持比例覆盖容器 */
  background-position: left center; /* 优先显示图片左侧 */
  /* 若需镜像背景图，添加以下属性： */
  /* filter: scaleX(-1); */
}

对应的HTML简化为：

<div id="logoindex"></div>

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