css - 使用溢出 : hidden? 时如何移动图像的 POV

Question

经过长时间的搜索，我终于找到了如何使用 overflow: hidden; 裁剪图像而不扭曲/挤压图像。现在我的下一个问题；我如何让图像显示我想要的部分，这意味着，当使用 overflow:hidden 时，它会从顶部而不是中间或底部显示图像。我如何调整它并从底部或中间显示图像？为了帮助更好地理解，请查看下面我在 photoshop 中创建的图像。图像描述顺序:默认图像，css 在默认溢出时的作用:隐藏，我想要的(中间 pov)，我想要的(底部 pov)。
谢谢。
编辑:我的布局是:父 div 与图像 div 作为 child 。父 div 的高度定义为 600px，宽度为 100%。图像 div 的高度和宽度定义为 100%。

Answer 1

假设您想要的宽度/高度和 overflow: hidden 应用于包含 div 的外部，您可以添加如下内容:

.container img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

这会将图像的显示区域向下移动容器高度的 50%(top: 50%)，然后向后移动图像高度的 50%(transform: translateY( -50%))，这最终使其在容器内居中。

你可以调整这些值来实现不同的定位，或者加入left:和transform:translateX()来调整横轴。