Ответ 1

Демоверсия jsFiddle

div
{
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
img {
    position: absolute;
    margin: auto; 
    min-height: 100%;
    min-width: 100%;

    /* For the following settings we set 100%, but it can be higher if needed 
    See the answer update */
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
}

Обновление - улучшение

Как Салман А упомянул в комментариях, исходное решение имеет недостаток - оно не работает, если высота или ширина img (или оба) (как минимум) в 3 раза * больше, чем содержащий div.

Проблема отображается здесь.

Салман также дал действительно простое и элегантное решение. Нам просто нужно обновить координаты позиции img (сверху, слева, снизу, справа), чтобы работать с более высокими процентами. Следующее исправление работает с 1000%, но, конечно, вы можете настроить его в соответствии с вашими потребностями.

рабочая версия показана здесь.

* Причина в том, что когда мы устанавливаем img влево и вправо (или: верх и низ) координаты равными -100% (от содержащего div), общая допустимая ширина (или: высота) img может быть равна самое большее 300% содержащей ширину div (или: высоту), потому что это сумма ширины div (или: высоты) и левой и правой (или: верхней и нижней) координат.

Ответ 2

Свойство object-fit делает волшебство. На JsFiddle.

CSS

.image {
  width: 160px;
  height: 160px;
}

.object-fit_fill {
  object-fit: fill
}

.object-fit_contain {
  object-fit: contain
}

.object-fit_cover {
  object-fit: cover
}

.object-fit_none {
  object-fit: none
}

.object-fit_scale-down {
  object-fit: scale-down
}

HTML

<div class="original-image">
  <p>original image</p>
  <img src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: fill</p>
  <img class="object-fit_fill" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: contain</p>
  <img class="object-fit_contain" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: cover</p>
  <img class="object-fit_cover" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: none</p>
  <img class="object-fit_none" src="http://lorempixel.com/500/200">
</div>

<div class="image">
  <p>object-fit: scale-down</p>
  <img class="object-fit_scale-down" src="http://lorempixel.com/500/200">
</div>

Результат

Ответ 3

<div>
    <img class="crop" src="http://lorempixel.com/500/200"/>
</div>

<img src="http://lorempixel.com/500/200"/>




div {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 10px;
    position: relative;
}
.crop {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto; 
    height: auto;
    width: auto;
}

http://jsfiddle.net/J7a5R/56/

Ответ 4

С учетом того, что он не работает в IE и некоторых старых мобильных браузерах, простой object-fit: cover; часто является лучшим вариантом.

.cropper {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.cropper img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Без поддержки object-fit: cover изображение будет странным образом растягиваться, чтобы соответствовать рамке, поэтому, если требуется поддержка IE, я бы рекомендовал использовать один из подходов с другими ответами с -100% сверху, слева, справа и нижние значения как запасной вариант.

http://caniuse.com/#feat=object-fit

Ответ 5

Попробуйте помещать изображение в контейнер следующим образом:

HTML:

<div>
    <img src="http://www.testimoniesofheavenandhell.com/Animal-Pictures/wp-content/uploads/2013/04/Dog-Animal-Picture-Siberian-Husky-Puppy-HD-Wallpaper.jpg" />
</div>

CSS

div
{
    width: 200px;
    height: 200px;
    overflow: hidden;
}

div > img
{
    width: 300px;
}

Здесь fiddle.

Ответ 6

clip свойство с position может помочь вам

a{
position:absolute;
clip:rect(0px,200px,200px,0px);
}

a img{
position:relative;
left:-50%;
top:-50%;
 }

РАБОЧИЙ FIDDLE

Ответ 7

HTML:

<div class="thumbnail">
</div>

CSS

.thumbnail { 
background: url(image.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
width: 250px;
height: 250px;
}

Ответ 8

Я нашел лучшие решения в следующей ссылке. Используйте только "объект-подгонка" https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

Ответ 9

<div style="specify your dimension:overflow:hidden">
    <div style="margin-top:-50px">
       <img ...  />
    </div>
</div>

Вышеописанное будет обрезать 50 пикселей с верхней части изображения. Вы можете захотеть вычислить, чтобы получить верхний край, который будет соответствовать вашим требованиям на основе размера изображения.

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