Question

这是我的代码：

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

我想在此div中从左右两侧裁剪。

But it only crop a part from right

但它只能从右边裁剪一部分。

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

enter image description here

提前致谢!!!

Answer 1

为什么不将图像设置为背景？

<强> HTML

<div id="mydiv" style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
</div>

<强> CSS

#mydiv
{ 
    background-image:url('myimg.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; 
}

Answer 2

您可以按原样保留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; }

Answer 3

使用<img>无法实现您的目标。但是，您可以使用“CSS Sprite”技巧：

<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;
    background: url(myimg.png) no-repeat center center">
</div>

没有jsFiddle，对不起，因为我没有你的形象。

Answer 4

您只需将背景图片设置为div

即可

<强> HTML

<div class='myDiv'></div>

<强> CSS

.myDiv {
    width: 75px;
    height: 75px;
    background: url('myimg.jpg') no-repeat -123px 0px;
}

将-123px调整到应该开始裁剪的正确左偏移量。

编辑：jsFiddle

Answer 5

这里有一个针对类似问题提出的解决方案：http://codepen.io/gcyrillus/pen/BdtEj

/* see demo : http://codepen.io/gcyrillus/pen/BdtEj , to play with and understand */ 
parent {
   line-height:equals to height;
   text-align:center;
}
parent img {
   vertical-align:middle;
   margin:-100%;
}

它是关于剪裁你的图像。你有那个古老而实用的CSS规则：clip：rect（）; http://www.w3.org/wiki/CSS/Properties/clip有这个目的。

或者使用技巧（因为您喜欢使用CSS）将虚拟图像zize减少为null，因此水平和垂直居中并不重要。 http://codepen.io/gcyrillus/pen/BdtEj

Answer 6

这是播放div的小技巧...... 把你想要的div放在另一个div里面.. 将外部div的溢出设置为隐藏他们只需移动内部div，因为你想使用margin_left，right，top，down属性来裁剪它......

<div style="overflow:hidden;">
    <div id="myDiv" style="overflow:hidden;margin-top:-30px"></div>
</div>

简单：）

Answer 7

您几乎可以使用 clip-path 裁剪任何内容：

applicationIdSuffix ".debug"

Answer 8

有更多可能的解决方案：使用容器div并在图像上应用负位置。或者您可以将图像设置为div的背景，例如，您可以使用背景位置。

Answer 9

以下是根据您的要求提供的 DEMO 链接，即。

<div class="mainDiv">
    <div class="green"></div>
  </div>

.mainDiv {
    margin:0 auto;
    border:1px solid #000;
    width:700px;
    height:500px;
    text-align:center;
}
.mainDiv .green {
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block;
    }

Answer 10

只要您知道图像的宽度，就可以使用图像和任何元素，css定位。将position:relative添加到div，并将position:absolute添加到图片上，同时添加left:-204px;top:0;中图片宽度的一半。

示例小提琴：http://jsfiddle.net/ctXcJ/2/

Answer 11

尝试margin: 0 auto;而不是text-align。

从左和右裁剪div

11 个答案: