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

Ответ 1

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

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

.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%;
}​

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

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

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

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

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

Ответ 2

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

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

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

См. пример здесь

Там polyfill для IE: https://github.com/anselmh/object-fit

Ответ 3

Единственный реальный способ - иметь контейнер вокруг вашего изображения и использовать 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/

Ответ 4

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

Есть три различия:

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 ..."  />
   

Ответ 5

Решение 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>

Ответ 6

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

Затем вы можете сделать это с помощью тега 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 http://jsfiddle.net/9kUYC/2/

Ответ 7

Построение ответа @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();

Ответ 8

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

Ответ 9

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

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

EDIT: @Dominic Green избил меня.

Ответ 10

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

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;
}

Ответ 11

Я думаю, что уже довольно поздно для этого ответа. В любом случае надеюсь, что это поможет кому-то в будущем. Я столкнулся с проблемой позиционирования карт в угловом положении. Есть карты, отображаемые для массива событий. Если ширина изображения события велика для карты, изображение должно быть показано обрезкой с двух сторон и высотой 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;
}

Ответ 12

• Не использовать фон 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%);
}

Ответ 13

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

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

Ответ 14

Попробуйте использовать этот стиль:

width: auto;