«Обрезать» фотографию с помощью CSS

Question

У меня есть список предметов, которые мне нужно «обрезать» (я понимаю, что использование чистого CSS, которое на самом деле не обрезает, просто показывает вам часть изображения), пока у меня есть это как ...

Это: My JSFiddle example.

в основном я почти там, мне просто нужно центрировать изображение в обрезанной зоне так его показ в основном верхнюю среднюю секции.

.cocktailThumb img{ 
border-width:0px; 
width:300px; 
height:350px; 
position:relative;  /Tried adding this 
right: 40px; /Tried adding this 
} 

.cocktailThumb { 
border-width:0px; 
width:220px; 
height:150px; 
padding-left:20px; 
overflow:hidden; 
} 

Разделы, которые я добавил и попытались изменить, заставили изображение войти в центр. Но переполнение все равно оставалось слева, тогда как мне нужно было оставаться внутри div.

Любая помощь, которую я мог бы получить, была бы потрясающей, я довольно новичок в программировании, но наслаждаюсь каждым ее шагом.

Еще раз спасибо!
Pat

Редактировать: Найдены ответы были в пределах свойства клипа. Благодаря BrbCoding

Answer 1

Что делать, если вы просто использовали background-image с некоторым фоном позиционирования?

HTML

<div id="crop"></div> 

CSS

#crop { 
    position: relative; 
    width: 150px; 
    height: 150px; 
    display: block; 
    background-image: url(http://placekitten.com/300/300); 
    background-position: 50% 50%; 
} 

DEMO

EDIT: Или, вы можете даже использовать clip собственность ...

.cropped { 
    position: absolute; 
    clip: rect(75px, 250px, 250px, 75px); 
} 

И вот демо - щелкните изображение, чтобы обрезать его.

DEMO

Answer 2

установить max-width: 100%; в IMG

http://jsfiddle.net/V4YEx/3/

Answer 3

Отрицательные поля на a.darken:

margin-left: -50px; 
margin-top: -50px; 
height: 200px; 

http://jsfiddle.net/V4YEx/7/

Answer 4

Если добавить к position: relative .cocktailThumb, а затем добавить position: absolute к изображению вы можете перемещать его по желанию внутри контейнера. Например, если вы хотите, чтобы все было направо, вы можете просто сделать right: 0 на изображении. Отсюда вы можете изменить правильное свойство на все, что вам нужно, чтобы сосредоточить его.

Fiddle: http://jsfiddle.net/V4YEx/1/

Answer 5

Используйте CSS спрайтов.

background:url(http://www.girlsgetaway.com/wp-content/uploads/2011/07/drinks_300x350.jpg) -50px -15px; 
<img src="" />  

http://jsfiddle.net/V4YEx/6/