Розмір зображення 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 згідно швидкого керівництва Томаса Фукса.

Варто зазначити, що підтримка браузера для обох атрибутів виключає 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 дів, щоб відключити його
• Зменшено до мінімальної ширини, ніж зберегти правильне співвідношення сторін
• Обрізання від центру (вертикально і горизонтально, ви можете налаштувати це зверху, ліворуч та перетворити)

Будьте обережні, якщо ви використовуєте тему чи щось таке, вони часто оголошують максимальну ширину img на 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/

Використання контейнера з переповненням: приховано

EDIT: @Dominic Green побив мене.

Це дозволить заповнити зображення до певного розміру, не розтягуючи його чи не обрізаючи

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>