blocks|key|4557477|text|您可以保持HTML不变，并将图像的position:relative和位置设置为left:-50%25+(或margin-left:-50%25)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4557478|您的HTML：|4557479|<div+id="cropper">
++++<img+src="http://lorempixel.com/output/sports-q-c-900-600-3.jpg"+/>
</div>|code-block|syntax|javascript|4557480|你的CSS：|4557481|#cropper{
++++width:450px;
++++height:600px;
++++overflow:hidden;
}
img{
++++position:relative;
++++left:-50%25;
}|4557482|4557483|编辑|BOLD|4557484|4557485|要以任何div大小精确地居中图像，您需要以像素而不是百分比来定位图像，除非容器正好是图像大小的一半。因此，900x600像素图像的最终CSS为：|4557486|img{
++++position:relative;
++++left:-450px;
++++}|4557487|entityMap^0|H|H|14|9|1G|G|0|0|0|0|0|0|0|2|0|0|4|3|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1D|8|@$9|1E|A|1F|B|T]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|Z|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|10|$]]

<p>You can keep your HTML as is and make the image's <code>position:relative</code> and the position <code>left:-50%</code> (or <code>margin-left:-50%</code>).</p>

<p>Your HTML:</p>

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

<p>Your CSS:</p>

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

<p><a href="http://jsfiddle.net/HEFv2/" rel="noreferrer"><strong>Here's the demo.</strong></a></p>

<p><strong>EDIT</strong></p>

<hr>

<p>To accurately center the image in any <code>div</code> size, you need to position the image in pixels and not in percentage unless the container is exactly half the size of the image. So the final CSS of an image size of 900x600 pixels would be:</p>

<pre><code>img{
    position:relative;
    left:-450px;
    }
</code></pre>


blocks|key|2445575|text|为什么不将图像设置为背景呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2445576|HTML|offset|length|style|BOLD|2445577|<div+id="mydiv"+style="width:+75px;+height:+75px;+text-align:+center;+overflow:+hidden;">
</div>|code-block|syntax|javascript|2445578|CSS|2445579|#mydiv
{+
++++background-image:url('myimg.png');
++++background-repeat:no-repeat;
++++background-attachment:fixed;
++++background-position:center;+
}|2445580|entityMap^0|0|0|4|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>Why not set the image as background?</p>

<p><strong>HTML</strong></p>

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

<p><strong>CSS</strong></p>

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


blocks|key|1844033|text|这是裁剪一个div的小窍门。将想要裁剪的div放入另一个div中。设置溢出的外部div隐藏他们简单地移动内部div，因为你想要裁剪它使用margin_left，右，上，下属性...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1844034|<div+style="overflow:hidden;">
++++<div+id="myDiv"+style="overflow:hidden;margin-top:-30px"></div>
</div>|code-block|syntax|javascript|1844035|简单:)|1844036|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here this is s small trick to crop a div...
put the div you want to crop inside another div..
set overflow of outer div to hidden
them simply shift the inner div as you want to crop it using margin_left,right,top,down attributes...</p>

<pre><code>&lt;div style="overflow:hidden;"&gt;
    &lt;div id="myDiv" style="overflow:hidden;margin-top:-30px"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Simple :)</p>


blocks|key|5973903|text|使用<img>不可能实现您想要的功能。但是，您可以使用"CSS+Sprite“技巧：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5973904|<div+style="width:+75px;+height:+75px;+text-align:+center;+overflow:+hidden;
++++background:+url(myimg.png)+no-repeat+center+center">
</div>|code-block|syntax|javascript|5973905|没有jsFiddle，对不起，因为我没有你的图像。|5973906|entityMap^0|2|5|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>What you want is not possible with an <code>&lt;img&gt;</code>. However, you can use the "CSS Sprite" trick:</p>

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

<p>No jsFiddle, sorry, as I don't have your image.</p>


blocks|key|4557422|text|您可以只将背景图像设置为div|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4557423|HTML|BOLD|4557424|<div+class='myDiv'></div>|code-block|syntax|javascript|4557425|CSS|4557426|.myDiv+{
++++width:+75px;
++++height:+75px;
++++background:+url('myimg.jpg')+no-repeat+-123px+0px;
}|4557427|将-123px调整为距裁剪开始位置的正确左偏移量。|4557428|编辑：jsFiddle|4557429|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/fXWyh/^0|C|3|0|0|4|0|0|0|3|0|0|1|6|0|3|8|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|19|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1A|8|@$9|1B|A|1C|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1D|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|V|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]]]

<p>You can just set a background image to the <code>div</code></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class='myDiv'&gt;&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

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

<p>Adjust <code>-123px</code> to the correct left offset from where cropping should start.</p>

<p>EDIT: <a href="http://jsfiddle.net/fXWyh/" rel="nofollow">jsFiddle</a></p>


blocks|key|2445671|text|对于类似的问题，这里有几次提出的解决方案：http://codepen.io/gcyrillus/pen/BdtEj|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2445672|/*+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%25;
}|code-block|syntax|javascript|2445673|它是关于使用最老和最常用的CSS规则:+image.You+:rect()；http://www.w3.org/wiki/CSS/Properties/clip来裁剪您的clip，它就有这个用途。|2445674|或者使用一个技巧(因为你喜欢使用CSS)来将虚拟图像大小减少到空，这样它就可以水平和垂直居中，而不管它的实际大小。http://codepen.io/gcyrillus/pen/BdtEj|2445675|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/gcyrillus/pen/BdtEj|1|http://www.w3.org/wiki/CSS/Properties/clip|2^0|L|11|0|0|0|12|16|1|0|1L|11|2|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|K|3|L|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|M|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|T]]]]

<p>here's a solution proposed a few times here for similar questions:<a href="http://codepen.io/gcyrillus/pen/BdtEj" rel="nofollow">http://codepen.io/gcyrillus/pen/BdtEj</a> </p>

<pre><code>/* 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%;
}
</code></pre>

<p>It's about clipping your image.You have that old and usefull CSS rule : clip:rect(); 
<a href="http://www.w3.org/wiki/CSS/Properties/clip" rel="nofollow">http://www.w3.org/wiki/CSS/Properties/clip</a> wich has this purpose.</p>

<p>Or using a trick (cause you enjoy to play with CSS) to reduce virtually image zize to null, so it centers horizontally and vertically no matters it's real size.
<a href="http://codepen.io/gcyrillus/pen/BdtEj" rel="nofollow">http://codepen.io/gcyrillus/pen/BdtEj</a></p>


blocks|key|5974058|text|您可以使用clip-path裁剪几乎任何内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5974059|.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);
}|code-block|syntax|javascript|5974060|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path^0|5|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path" rel="nofollow noreferrer">clip-path</a> to crop pretty much anything:</p>
<pre><code>.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);
}
</code></pre>


blocks|key|4557388|text|对此有更多可能的解决方案:使用容器div并在图像上应用负定位。或者，您可以将图像设置为div的背景，这使您能够使用背景位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4557389|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>There are more possible solutions for this:
Using a container div and applying negative positioning on the image. Or you can set the image as the background of div which makes you able to use background-position for example.</p>


blocks|key|5973877|text|下面是根据你的需求的链接，它在ie中工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5973878|<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;
++++}|code-block|syntax|javascript|5973879|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Below is the <strong><a href="http://jsfiddle.net/ARRuR/1/" rel="nofollow">DEMO</a></strong> link as per your requirement, which work in ie.</p>

<pre><code>&lt;div class="mainDiv"&gt;
    &lt;div class="green"&gt;&lt;/div&gt;
  &lt;/div&gt;

.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;
    }
</code></pre>


blocks|key|4557399|text|只要您知道图像的宽度，就可以对图像和任何元素进行css定位。将position:relative添加到div，在图像上添加position:absolute，以及left:-204px;top:0;中图像宽度的一半。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4557400|示例小提琴：http://jsfiddle.net/ctXcJ/2/|4557401|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ctXcJ/2/^0|V|H|1P|H|29|I|0|6|S|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>It's possible with image and any element, css positioning, provided that you know the width of the image.
Add <code>position:relative</code> to the div, and <code>position:absolute</code> on the image together with half the width of the image in a <code>left:-204px;top:0;</code>.</p>

<p>Example fiddle: <a href="http://jsfiddle.net/ctXcJ/2/" rel="nofollow">http://jsfiddle.net/ctXcJ/2/</a></p>


blocks|key|4557314|text|尝试使用margin:+0+auto;而不是text-align。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4557315|entityMap^0|4|F|M|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>try <code>margin: 0 auto;</code> instead of <code>text-align</code>.</p>


<p>This is my code:</p>

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

<p>I want to crop from left and right my image in this div.</p>

<p><img src="https://i.stack.imgur.com/IKk8l.png" alt="But it only crop a part from right"></p>

<p>But it only crop a part from right.</p>

<p>I want to do something like this (which works in IE 8-10 too).</p>

<p><img src="https://i.stack.imgur.com/i26GN.png" alt="enter image description here"></p>

<p>Thanks in advance!!!</p>


Crop div from left and right

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

这是我的代码：<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;">    <img src"myimg.png"/></div>我想在这个div中从左到右裁剪我的图像。​​但它只从右边裁剪了一部分。我想做这样的事情(在IE 8-10中也可以)。​​提前感谢！

问从左到右裁剪div
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从左到右裁剪divEN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从左到右裁剪div
EN