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

Posted 2023-02-25

【中文标题】使用溢出时如何移动图像的 POV：隐藏？

【英文标题】：How to move the POV of an image when using overflow: hidden?

【发布时间】：2016-08-08 18:33:37

【问题描述】：

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

【参考方案1】：

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

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

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

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

【讨论】：

无论有没有“位置：相对”，这对我都有效。我还设法使它与简单地使用'margin-top：-180px'一起工作。你会说这是有效的吗？

【参考方案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>

【参考方案3】：

这是我对看到这篇文章的任何人的回答/解决方案。

#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>