Crop ДИВ слева и справа

Question

Это мой код:

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

Я хочу, чтобы обрезать слева и справа мой образ в этом дел.

Но это только обрезать часть от правой.

Я хочу сделать что-то подобное (что работает и в IE 8-10).

Заранее спасибо !!!

Answer 1

попробуйте margin: 0 auto; вместо text-align.

Answer 2

Ниже приведена ссылка 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 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; 
} 

Answer 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, извините, так как у меня нет изображения.

Answer 5

Возможны следующие варианты решения: Использование контейнера div и использование отрицательного позиционирования на изображении. Или вы можете установить изображение в качестве фона div, что позволяет использовать фоновое положение, например.

Answer 6

Это возможно с изображением и любым элементом, css-позиционированием при условии, что вы знаете ширину изображения. Добавить position:relative в div и position:absolute на изображение вместе с половиной ширины изображения в left:-204px;top:0;.

Пример скрипку: http://jsfiddle.net/ctXcJ/2/

Answer 7

Вы можете просто установить фоновое изображение в div

HTML

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

CSS

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

Отрегулируйте -123px на правильное смещение слева от места начала обрезки.

EDIT: jsFiddle

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

Это о обрезано image.You имеют, что старые и правила CSS полезно: клип: Прямоугольник (); http://www.w3.org/wiki/CSS/Properties/clip с этой целью.

Или использовать трюк (потому что вам нравится играть с CSS), чтобы уменьшить изображение zize до нуля, поэтому он центрируется по горизонтали и по вертикали, не имеет значения, что это реальный размер. http://codepen.io/gcyrillus/pen/BdtEj

Answer 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.

EDIT

---

Для accur центрируйте изображение в любом размере div, вам нужно поместить изображение в пикселях, а не в процентах, если контейнер не равен половине размера изображения. Таким образом, окончательный CSS от размера изображений 900x600 пикселей будет:

img{ 
    position:relative; 
    left:-450px; 
    } 

Answer 10

Вот это S небольшого трюка, чтобы обрезать DIV ... поставить DIV вы хотите обрезать внутри другой DIV .. набора переполнение внешних дел до скрытой их просто перенести внутренний DIV, как вы хотите, чтобы обрезать его, используя margin_left, справа, сверху вниз атрибутов ...

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

Простого :)