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

Question

所以经过长时间的搜索，我终于找到了如何使用 overflow: hidden; 裁剪没有 distorting/squashing 图像的图像。现在我的下一个问题；我如何让图像显示我想要的部分，意思是，当使用 overflow:hidden 时，它会从顶部而不是中间或底部显示图像。我如何调整它并从底部或中间显示图像？为了帮助更好地理解，请查看下面我在 photoshop 中创建的图像。图像描述顺序：默认图像，css 默认情况下溢出时的作用：隐藏，我想要的（中间 pov），我想要的（底部 pov）。
谢谢。
编辑：我的布局是：父级 div 图像 div 作为子级。父项 div 的高度定义为 600 像素，宽度为 100%。图像的高度和宽度 div 定义为 100%。

Answer 1

您使用这张图片的方式是什么？

如果您将其用作背景图像，则解决方案要简单得多，只需使用背景定位即可。如果您将其用作使用 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 2

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

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

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

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

Answer 3

这是我的 answer/solution，供所有遇到此问题的人使用 post。

#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%);

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

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

How to move the POV of an image when using overflow: hidden?

css

image

crop

overflow