使用 CSS 剪辑后，我可以移动图像以显示不同的部分吗？答案

【问题标题】：After using CSS clip can I move the image to display a different section?使用 CSS 剪辑后，我可以移动图像以显示不同的部分吗？
【发布时间】：2013-05-07 18:44:16
【问题描述】：

我使用 CSS 剪辑属性来剪辑我的图像。它从左上角显示图像。我可以移动图像以使其显示图像的中心吗？我尝试了以下样式属性来尝试移动图像，但没有成功，顶部、左侧和边距。我已经搜索了整个互联网，但我只能找到有关如何使用剪辑属性的说明。这是我的代码：

CSS

.clip {
    position: relative;
    height: 130px;
    width: 200px;
    border: solid 1px #ccc;
}
.clip img {
    position: absolute;
    clip: rect(10px 190px 120px 10px);
}

html

<ul id="galleries">
  <li class="clip">
    <a href="images/image_01.jpg" rel="lightbox">
      <img src="images/image_01.jpg"/>
    </a>
  </li>
  <li class="clip">
    <a href="images/image_02.jpg" rel="lightbox">
      <img src="images/image_02.jpg"/>
    </a>
  </li>
  <li class="clip">
    <a href="images/image_03.jpg" rel="lightbox">
      <img src="images/image_03.jpg"/>
    </a>
  </li>
</ul>

【问题讨论】：

在我给出答案之前，您希望只显示图像的中心而不显示图像的所有其余部分。我说的对吗？
那行得通。如果我选择的话，我希望能够将它移动到右上角、中心或左下角。不是针对每个人，而是针对所有剪辑。
所有图像的高度和宽度是否相同，如果是这样，这应该可以。 jsfiddle.net/cornelas/5ubek
如果您有兴趣，可以使用 jquery 更快地完成此操作。这将涉及将背景 img 放在您的 A href 上。并且只需输入带有 img 的文字。然后在屏幕外缩进你的文本。这是一个更好的解决方案，速度更快，对每个单独领域的关注更少。
我访问了 Cam 发布的 jsfiddle 链接，效果很好。图像的大小并不完全相同，但它们很接近，因此可以正常工作。谢谢。

标签： html css image position clip

【解决方案1】：

这是您问题的答案。溢出将有效地隐藏您不想显示的所有空间。在 img 上放置相对位置会导致 img 显示在中间或您想要的位置。

Here is a jsFiddle

CSS

.clip {
    position: relative;
    overflow: hidden; /*** Overflow to hide anything out of the size of the box ***/
    height: 130px;
    width: 200px;
    border: solid 1px #ccc;
}
.clip img {
    position: relative; /*** position relative to place the img in center ***/
    top: -50%;
    left: -15%;
 }

【讨论】：