Центрировать изображение и обрезать его

Question

Я хочу поместить изображение в элемент div, который намного меньше, чем image, и скрыть или обрезать изображение вне элемента div.Я сделал это так:

.slideshow img {
    width: 250px;
}
.slideshow {
    overflow: hidden;
    height: 170px;
    width: 250px;
    position:relative;

}

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

Answer 1

Используйте свойство clip css для изображения или установите положение относительно отрицательной левой и верхней позиции

img 
{
clip:rect(0px,60px,200px,0px);
}

Answer 2

Просто добавьте:

position:relative;
left:-25%;
top:-25%;

в ваш .slideshow img class

Это должно работать.

Answer 3

Вы можете центрировать изображение только по вертикали в линию, которая по крайней мере равна его высоте. Таким образом, хитрость заключается в том, чтобы центрировать изображение в очень высоком элементе div, а затем использовать относительное расположение, чтобы центрировать элемент div относительно исходного элемента div. CSS, который вам понадобится для внутреннего div, выглядит примерно так: vertical-align: middle; line-height: 850px; position: relative; top: -340px;.