Размер CSS изображения, как заполнить, а не растянуть?

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

Но если я установлю ширину и высоту с помощью css ( width:150px; height:100px), изображение будет растянуто, и это может быть некрасиво.

Как заполнить изображения до определенного размера с помощью CSS, а не растягивать его?

Пример заливки и растяжения изображения:

Исходное изображение:

Растянутое изображение:

Заполненное изображение:

Обратите внимание, что в приведенном выше примере с заполненным изображением: сначала размер изображения изменяется до 150x255 (с сохранением соотношения сторон), а затем обрезается до 150x100.

Если вы хотите использовать изображение в качестве фона CSS, есть элегантное решение. Просто используйте coverили containв background-sizeсвойстве CSS3.

.container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<div class="container"></div>​

Пока coverдаст вам уменьшенное изображение, containдаст вам уменьшенное изображение. Оба сохранят пропорции пикселя.

http://jsfiddle.net/uTHqs/ (используя обложку)

http://jsfiddle.net/HZ2FT/ (с использованием содержимого)

Этот подход имеет преимущество в том, что он дружелюбен к дисплеям Retina согласно краткому руководству Thomas Fuchs

Стоит отметить, что поддержка браузером обоих атрибутов исключает IE6-8.

Вы можете использовать свойство css object-fit.

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

Смотрите пример здесь

Есть полифилл для IE: https://github.com/anselmh/object-fit

Улучшение в ответе выше @afonsoduarte ( НЕ принятый) .
если вы используете загрузчик

1. Обеспечение width:100%по стилю.
   Это полезно, если вы используете загрузчик и хотите, чтобы изображение растягивалось на всю доступную ширину.
   

2. Указывать heightсвойство необязательно, Вы можете удалить / оставить его по своему усмотрению.

   .cover {
      object-fit: cover;
      width: 100%;
      /*height: 300px;  optional, you can remove it, but in my case it was good */
   }

3. Кстати, нет никакой необходимости , чтобы обеспечить heightи widthатрибуты на imageэлементе , поскольку они будут переписаны стилем.
   так что достаточно написать что-то вроде этого.

   <img class="cover" src="url to img ..."  />

Единственный реальный способ - создать контейнер вокруг изображения и использовать overflow:hidden:

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

В CSS трудно делать то, что вы хотите, и центрировать изображение, в jquery есть быстрое решение, такое как:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

Решение CSS без JS и без фонового изображения:

Метод 1 «маржинальное авто» (IE8 + - НЕ FF!):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/

Способ 2 «преобразования» (IE9 +):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/1/

Метод 2 можно использовать для центрирования изображения в контейнере с фиксированной шириной / высотой. Оба могут переполниться - и если изображение меньше контейнера, оно все равно будет отцентрировано.

http://jsfiddle.net/5xjr05dt/3/

Способ 3 «двойная обертка» (IE8 + - НЕ FF!):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}

<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/5/

Метод 4 «Двойная обертка И двойное изображение» (IE8 +):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}

<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/26/

• Метод 1 имеет немного лучшую поддержку - вы должны установить ширину ИЛИ высоту изображения!
• С префиксами метод 2 также имеет достойную поддержку (от ie9 и выше) - Метод 2 не поддерживается в Opera mini!
• Метод 3 использует две обертки - может переполнять ширину и высоту.
• В методе 4 используется двойное изображение (одно в качестве заполнителя), что дает дополнительную нагрузку на полосу пропускания, но еще лучше поддерживает кроссбраузер.

Методы 1 и 3 не работают с Firefox

Другое решение состоит в том, чтобы поместить изображение в контейнер с желаемой шириной и высотой. Используя этот метод, вам не нужно устанавливать изображение в качестве фонового изображения элемента.

Затем вы можете сделать это с помощью imgтега и просто установить максимальную ширину и максимальную высоту для элемента.

CSS:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

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

Если вы хотите центрировать изображение по вертикали и горизонтали, вы можете изменить контейнер css на:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

Вот JS Fiddle http://jsfiddle.net/9kUYC/2/

Основываясь на ответе @Dominic Green, используя jQuery, вот решение, которое должно работать для изображений, которые шире, чем они высоки, или выше, чем они широки.

http://jsfiddle.net/grZLR/4/

Вероятно, есть более элегантный способ сделать JavaScript, но это работает.

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

• Не использовать фон CSS
• Только 1 div, чтобы обрезать его
• Уменьшен до минимальной ширины, чтобы сохранить правильное соотношение сторон
• Обрезать от центра (по вертикали и горизонтали, вы можете отрегулировать это с помощью верхней, левой и трансформации)

Будьте осторожны, если вы используете тему или что-то, они часто объявляют img max-width на 100%. Вы должны сделать ничего. Проверьте это :)

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

Я помог создать плагин jQuery под названием Fillmore , который обрабатывает background-size: coverбраузеры, которые его поддерживают, и имеет шим для тех, кто этого не делает. Посмотри!

Я думаю, что уже довольно поздно для этого ответа. В любом случае, надеюсь, это поможет кому-то в будущем. Я столкнулся с проблемой позиционирования карт в угловом положении. Есть карты, отображаемые для массива событий. Если ширина изображения события велика для карты, изображение должно быть показано обрезкой с двух сторон и высотой 100%. Если высота изображения длинная, нижняя часть изображения обрезается, а ширина составляет 100%. Вот мое чистое решение CSS для этого:

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

Попробуйте что-то вроде этого: http://jsfiddle.net/D7E3E/4/

Использование контейнера с переполнением: скрыто

РЕДАКТИРОВАТЬ: @ Доминик Грин избил меня.

Это позволит заполнить изображения до определенного размера, не растягивая его или не обрезая его

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}

Чтобы разместить изображение в полноэкранном режиме, попробуйте это:

повторение фона: круглый;

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>