这是我的代码：
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
<img src"myimg.png"/>
</div>
我想在这个 div 中从左到右裁剪我的图像。
但它只从右侧裁剪一部分。
我想做这样的事情（它也适用于 IE 8-10）。
提前致谢！！！
问问题
26673 次
11 回答
5
您可以保持 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%;
}
编辑
要以任何尺寸准确居中图像div，您需要以像素而不是百分比来定位图像，除非容器正好是图像大小的一半。所以 900x600 像素的图像尺寸的最终 CSS 将是：
img{
position:relative;
left:-450px;
}
于 2013-07-15T13:49:00.310 回答
2
为什么不将图像设置为背景？
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;
}
于 2013-07-15T12:23:40.247 回答
2
这是裁剪 div 的小技巧...将要裁剪的 div 放入另一个 div 中。设置外部 div 的溢出以隐藏它们只需移动内部 div 即可使用 margin_left,right,top 裁剪它,下属性...
<div style="overflow:hidden;">
<div id="myDiv" style="overflow:hidden;margin-top:-30px"></div>
</div>
简单的 ：）
于 2018-03-08T13:37:15.837 回答
1
你想要的东西是不可能的<img>。但是，您可以使用“CSS Sprite”技巧：
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;
background: url(myimg.png) no-repeat center center">
</div>
没有 jsFiddle，抱歉，因为我没有你的图片。
于 2013-07-15T12:23:44.420 回答
0
您只需将背景图像设置为div
HTML
<div class='myDiv'></div>
CSS
.myDiv {
width: 75px;
height: 75px;
background: url('myimg.jpg') no-repeat -123px 0px;
}
-123px从应该开始裁剪的位置调整到正确的左偏移。
编辑：jsFiddle
于 2013-07-15T12:33:26.477 回答
0
这是针对类似问题多次提出的解决方案：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）来减少虚拟图像的大小到 null，所以它水平和垂直居中，不管它是真实的大小。 http://codepen.io/gcyrillus/pen/BdtEj
于 2013-07-15T13:04:07.023 回答
0
您可以使用clip-path裁剪几乎所有内容：
.crop-left {
clip-path: inset(0 50px 0 0);
}
.crop-right {
clip-path: inset(0 0 0 50px);
}
.crop-top {
clip-path: inset(0 0 50px 0);
}
.crop-bottom {
clip-path: inset(50px 0 0 0);
}
于 2021-08-11T10:25:39.503 回答
-1
对此有更多可能的解决方案：使用容器 div 并在图像上应用负定位。或者您可以将图像设置为 div 的背景，这样您就可以使用 background-position 例如。
于 2013-07-15T12:25:25.960 回答
-2
只要您知道图像的宽度，就可以使用图像和任何元素、css 定位。添加position:relative到 div 中，并将position:absolute图像与图像的一半宽度一起放在一个left:-204px;top:0;.
小提琴示例：http: //jsfiddle.net/ctXcJ/2/
于 2013-07-15T12:27:48.457 回答
-2
下面是根据您的要求的演示链接，它适用于 ie。
<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;
}
于 2013-07-15T12:21:25.847 回答
-3
尝试margin: 0 auto;而不是text-align.
于 2013-07-15T12:19:26.213 回答