Обрезка и центрирование больших изображений

Question

Как автоматически обрезать изображение в предварительном просмотре галереи, чтобы широкое изображение было отрезано слева и справа? точно Показана центральная часть изображения, как в этом прикрепленной картинке:

У меня есть эта структура:

<div class="wrapper" style="overflow: hidden; height: 100px; width: 120px;"> 
    <div class="container"> 
     <img /> 
    </div> 
</div> 

Я хотел бы сделать это только с помощью CSS и без JavaScript.
Отрицательный запас (фиксированный) невозможен, потому что ширина моих изображений может быть очень различной.

Answer 1

То, что я обычно использую следующие:

.container { 
 
    height: 100px; 
 
    width: 120px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.container img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
}

<div class="container"> 
 
<img src="http://placehold.it/400x350" /> 
 
</div>

Это работает с любым размером изображения. Вы даже можете добавить высоту к изображению, чтобы ограничить его высоту (например, на вашем изображении) до высоты вашего контейнера (тогда она будет вырезать только левую и правую стороны изображения). Вы можете использовать это для любого элемента, включая video.

Answer 2

Вы можете использовать абсолютное позиционирование с высокими отрицательными значениями влево и вправо.
Эта общая ширина margin: 0 auto центрирует изображение в контейнере давая левую и правую части переполнения:

div{ 
 
    position:relative; 
 
    width:300px; 
 
    height:150px; 
 
    overflow:hidden; 
 
} 
 
img{ 
 
    position:absolute; 
 
    display:block; 
 
    left:-100%; right:-100%; 
 
    height:100%; width:auto; 
 
    margin:0 auto; 
 
} 
 
/*** FOR THE DEMO ***/ 
 
div{margin:0 auto;border:1px solid red;overflow:visible;}img{z-index:-1;}

<div> 
 
    <img src="http://placehold.it/600x150"> 
 
</div>

Answer 3

Я думаю, самый простой способ сделать изображение фоновое изображение и расположить его в центре подобный in this example.

В основном установить фоновое изображение, где ваш .wrapper ДИВ, как это:

<div class="wrapper" style="background-image: url(/images/your-image.jpg)"> 
</div> 

После этого, класс wrapper не будет делать много, так как, но вы можете изменить его на что-то вроде preview или thumbnail ,

И тогда ваш стиль будет выглядеть следующим образом:

.wrapper { 
    width: 120px; //Or whatever width you need it to be. 
    height: 100px; //Or whatever height you need it to be. 
    background-size: cover; 
    background-position: center; 
} 

Это действительно использует небольшой встроенный стиль, который некоторые люди неодобрительно, но это действительно работает, и это просто.