html - 从左边和右边裁剪d​​iv

Question

这是我的代码:

<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
    <img src"myimg.png"/>
</div>

我想在这个 div 中从左和右裁剪我的图像。

但它只裁剪了右边的一部分。

我想做这样的事情(也适用于 IE 8-10)。

提前致谢!!!

Answer 1

您可以保持 HTML 不变，并使图像的 position:relative 和位置 left:-50%(或 margin-left:-50 %).

您的 HTML:

<div id="cropper">
    <img src="http://lorempixel.com/output/sports-q-c-900-600-3.jpg" />
</div>

你的 CSS:

#cropper{
    width:450px;
    height:600px;
    overflow:hidden;
}
img{
    position:relative;
    left:-50%;
}

Here's the demo.

编辑

---

要使图像在任何 div 大小中准确居中，您需要以像素为单位而不是以百分比为单位定位图像，除非容器刚好是图像大小的一半。所以 900x600 像素的图像大小的最终 CSS 将是:

img{
    position:relative;
    left:-450px;
    }