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

Question

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

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 上放置 position relative 将使 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%;
 }