使用溢出时如何移动图像的POV：隐藏？

Question

经过长时间的搜索，我终于找到了如何在不使用overflow: hidden;扭曲/挤压图像的情况下裁剪图像。 现在我的下一个问题;如何让图像显示我想要的部分，这意味着，当使用overflow:hidden时，它会显示图像从顶部而不是中间或底部。如何调整并从底部或中间显示图像？为了帮助您更好地理解，请查看我在photoshop中创建的图片。按顺序图像描述：默认图像，默认情况下css默认使用溢出：隐藏，我想要什么（中间pov），我想要什么（底部pov）。
谢谢。
编辑：我的布局是：父div与图像div作为孩子。父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()来调整水平轴。

Answer 2

您使用此图像的方式是什么？

如果您将此作为背景图像使用，解决方案会更简单，并且只需使用背景定位。如果您将此作为使用img标签拉入的图像，您可以尝试以下操作图像。

请注意，这不适用于所有浏览器。

.new-image-container {
  position: relative;
  width: 250px;
  height: 250px;
  overflow: hidden;
}
.new-image-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-90%);
      -ms-transform: translate(-50%,-90%);
          transform: translate(-50%,-90%);
}

<div class="new-image-container">
    <img src="http://i.stack.imgur.com/j8aQR.jpg"></img>
</div>

Answer 3

以下是我在这篇文章中遇到的答案/解决方案。

＆＃13;

＆＃13;

#Banner {
  width: 100%;
  height: 350px
}
#backgroundBanner {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#backgroundBanner img {
  width: 100%;
  position: relative;
  top: 70%; /*make changes to this and below to adjust the positioning of the image*/
  transform: translateY(-70%);

＆＃13;

<div id="Banner">
  <div id="backgroundBanner">
    <img src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/55312/versions/4/screenshot.jpg">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;