4

这是我的代码：

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

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

但它只从右边裁剪一部分

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

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

在此处输入图像描述

提前致谢！！！

4

11 回答 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 回答