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

Question

我已经使用 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>

Answer 1

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

这是一个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%;
 }