从左右裁剪 div答案

【问题标题】：Crop div from left and right从左右裁剪 div
【发布时间】：2013-07-13 07:16:48
【问题描述】：

这是我的代码：

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

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

但它只会从右侧裁剪一部分。

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

提前致谢！！！

【问题讨论】：

但是已经居中了？
您的代码不足。添加CSS
如果您可以找到图片的大小，那么css image sprites 是您的最佳选择。
@MMPP 我相信你需要多解释一下你真正想要什么。自从您进行编辑后，您不再希望将图像“居中”，对吗？那你到底需要什么？此外，您的屏幕截图显示的裁剪区域比您来源中提到的 75×75 大得多。

标签： html css crop

【解决方案1】：

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

【讨论】：

【解决方案2】：

下面是 DEMO 链接，根据您的要求，在 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;
    }

【讨论】：

【解决方案3】：

为什么不把图片设置为背景呢？

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; 
}

【讨论】：

【解决方案4】：

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

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

没有 jsFiddle，抱歉，因为我没有你的图片。

【讨论】：

@Connor 将图像裁剪到所有侧面，而不仅仅是右侧。在他 OP 的问题中，每个屏幕截图都代表整个图形，而变暗的区域应该是不可见的。

【解决方案5】：

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

【讨论】：

只有在图像大小已知的情况下才能应用定位。
他仍然可以申请“顶部中心”。
不完全。这是一个例子：jsfiddle.net/TFCCQ 它没有居中。您可以仅使用 % 中的定位来解决此问题吗？
我讨厌 SO 允许在给出回复后编辑 cmets。

【解决方案6】：

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

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

【讨论】：

我的图片有流动的宽度，它在一个 php 循环中
好吗？用 PHP 回显图像宽度，然后将其除以 2。我说明了一种技术，它可以使用图像，因为其他赞成的答案表明它不是。
抱歉，我没有对你投反对票……我不知道谁对这些答案投了反对票……
没关系，我来这里不是为了任何名声:)。无论如何，只要您想使用图像标签，负偏移解决方案就是您要走的路，但是您需要知道图像宽度。背景 CSS 解决方案也是您不必知道图像宽度的替代方案。

【解决方案7】：

您可以将背景图片设置为div

HTML

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

CSS

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

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

编辑：jsFiddle

【讨论】：

这真的有效，我不是在开玩笑。伙计们，如果您没有尝试过，请不要对答案投反对票。我可以说我回答了这个问题，因为他说他会 从右侧裁剪一部分 而不是 居中图像 。感谢您的理解。 :)
你是对的。如果 OP 想要以像素为单位给出偏移量，那么这是正确的方法。

【解决方案8】：

对于类似的问题，这里多次提出解决方案：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）来将图像的尺寸缩小到空值，因此无论它的实际尺寸是多少，它都会水平和垂直居中。 http://codepen.io/gcyrillus/pen/BdtEj

【讨论】：

【解决方案9】：

您可以保持您的 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;
    }

【讨论】：

不错的技巧，但这仅是因为您将 div 设置为图像宽度的一半。任何其他与 div 并不再显示图像的中心部分。
@MrLister 这是真的。最准确的方法是使用background-image，但我的建议是基于给出的html。
@MrLister ...除非您以像素为单位设置图像的位置。请参阅我编辑的答案。

【解决方案10】：

这是裁剪 div 的小技巧... 将要裁剪的 div 放入另一个 div 中。将外部 div 的溢出设置为隐藏他们只需使用 margin_left,right,top,down 属性将内部 div 移动到您想要裁剪的位置...

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

简单:)

【讨论】：

【解决方案11】：

您可以使用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);
}

【讨论】：