Я создал функцию ниже этого, должен сделать это. Я одолжил часть логики от принятый ответ и скорректировал его для работы с любым контейнером путем создания отношения для размера изображения: контейнерный размер и затем сравненный, который больше фигурировать который размер корректироваться. Также добавленный 'центральный' аргумент ('истинные' центры, ложь устанавливает его на главный/левый).

я использую CSS3 с translateX/Y, но мог получить его работающий без него достаточно легко.

Вот код:

var coverImage = function(wrap, center) {

  if (typeof center === 'undefined') {
    center = true;
  }

    var wr = $(wrap),
        wrw = wr.width(),
        wrh = wr.height();

  var im = wr.children('img'),
        imw = im.width(),
        imh = im.height();

  var wratio = wrw / imw;
    var hratio = wrh / imh;

  //Set required CSS
  wr.css({'overflow' : 'hidden'});
  im.css({'position' : 'relative'});


  if (wratio > hratio) {
    im.width(wrw);
    im.css({'height' : 'auto'});

    if (center) {
      im.css({
        'top' : '50%',
        'transform' : 'translateY(-50%)'
      });
    }
  } else {
    im.height(wrh);
    im.css({'width' : 'auto'});

    if (center) {
      im.css({
        'left' : '50%',
        'transform' : 'translateX(-50%)'
      });
    }
  }
}

и контроль jsfiddle для наблюдения его в действии: https://jsfiddle.net/cameronolivier/57nLjoyq/2 /

Я сделал, что-то могло работать для эмуляции фон-size:cover и фон-position:center .

, Если Вы хотите сменить положение просто, изменяют стили" , вершина "" уехала " CSS

.box{
    overflow:hidden;
    position:relative;
}

.box img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

$('.box').each(function() {
     //aspect ratio of container
     var boxRatio = $(this).height() / $(this).width(); 
     //aspect ration of image
     var imageRatio = $(this).children('img').height() / $(this).children('img').width();
     //set width or height 100% depend of difference
     if (imageRatio > boxRatio) {
          $(this).children('img').css({"width":"100%","height":"auto"});                
     } else {
          $(this).children('img').css({"height":"100%","width":"auto" });
     }
});

, Эта функция должна быть активирована на "загрузке" и "изменить размер" события.

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

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

JSFiddle:

http://jsfiddle.net/66c43ao1/

HTML

<div class="test">
    <div class="cover">
        <img src="http://d2ws0xxnnorfdo.cloudfront.net/character/meme/cool-dog.jpg" width="590" height="590"/>
    </div>
</div>

CSS

/* modify the width and height below to demonstrate coverage */
.test {
    height: 300px;
    position: relative;
    width: 500px;
}
/* you will need the below styles */
.cover {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

JS

$('.cover').each(function() {
    var containerHeight = $(this).height(),
        containerWidth  = $(this).width(),
        image           = $(this).children('img'),
        imageHeight     = image.attr('height'),
        imageWidth      = image.attr('width'),
        newHeight       = imageHeight,
        newWidth        = imageWidth;

    if (imageWidth < containerWidth) {
        // if the image isn't wide enough to cover the space, scale the width
        newWidth        = containerWidth;
        newHeight       = imageHeight * newWidth/imageWidth;
    }
    if (imageHeight < containerHeight) {
        // if the image isn't tall enough to cover the space, scale the height
        newHeight       = containerHeight;
        newWidth        = imageWidth * newHeight/imageHeight;
    }

    var marginLeft      = (newWidth - containerWidth)/2;
    var marginTop       = (newHeight - containerHeight)/2;

    image.css({
        marginLeft  : '-' + marginLeft + 'px',
        marginTop   : '-' + marginTop + 'px',
        height      : newHeight,
        width       : newWidth
    });
});

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

Если Вы хотите изображение, центрируемое в поле, не изменяя размер изображения, просто используйте этот код:

.box {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.box img {
    width: 413px;
    height: 325px;
    position: absolute;
    left: 50%;
    top: 50%;
}

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

.box {
    width: 100px;
    height: 100px;
}
.box img {
    width: 100%;
    height: auto;
}

Этот код оставит некоторый пробел, если изображение будет более широким, чем это высоко. Если ни один из них не работает, Вы могли бы просто установить изображение как фон и использование background-size: cover;.

Вот чистая функция JavaScript, чтобы сделать это и пример реализации:

function backgroundCover(elementSizes, containerSizes) {
    var elementRatio = elementSizes.width / elementSizes.height,
        containerRatio = containerSizes.width / containerSizes.height;
        width = null,
        height = null;
    if (containerRatio > elementRatio) {
        width = Math.ceil( containerSizes.width );
        height = Math.ceil( containerSizes.width / elementRatio );
    } else {
        width = Math.ceil( containerSizes.height * elementRatio );
        height = Math.ceil( containerSizes.height );
    }
    return { width, height };
}

Вот пример реализации:

HTML

<!-- Make sure the img has width and height attributes. The original image's width and height need to be set in order to calculate the scale ratio. -->
<div class="photo"><img src="photo.jpg" width="400" height="300"></div>

CSS

.photo {
    position: relative;
    overflow: hidden;
    width: 200px;
    padding-bottom: 75%; /* CSS technique to give this element a 4:3 ratio. */
}
.photo img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

JavaScript

$( window ).on( 'resize', function() {
    $( '.cover-photo' ).each( function() {
        var img = $( 'img', this ),
            imgWidth = img.attr( 'width' ),
            imgHeight = img.attr( 'height' ),
            containerWidth = $( this ).width(),
            containerHeight = $( this ).height(),
            newSizes = backgroundCover( { width: imgWidth, height: imgHeight }, { width: containerWidth, height: containerHeight } );
        img.css( {
            width: newSizes.width,
            height: newSizes.height
        } );
    } );
} );

Это - чистое решение для CSS. Можно определить обертку с:

div.cover {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

и img:

img.cover {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  overflow-x: hidden;
}

Здесь живой пример:

http://codepen.io/ErwanHesry/pen/JcvCw

Можно использовать этот стиль для тега изображения: "объект-fit:cover"; Эта ссылка будет поддерживать Вас также https://css-tricks.com/almanac/properties/o/object-fit /

Вот мой подход:

//collect the nodes
var parent = $('.box');
var img = $('image', box);

//remove width and height attributes
img.removeAttr('width');
img.removeAttr('height');

//set initial width
img.attr('width', parent.width());

//if it's not enough, increase the width according to the height difference
if (img.height() < parent.height()) {
    img.css('width', img.width() * parent.height() / img.height());
}

//position the image in the center
img.css({
    left: parseInt((img.width() - parent.width())/-2) + 'px',
    top: parseInt((img.height() - parent.height())/-2) + 'px'
});

СКРИПКА

От https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:

cover
    This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

Так, Вы или смотрите на создание width: 100% или эти height: 100%, какой бы ни создаст перекрытие в родителе div. Таким образом, мы можем использовать следующую логику:

var makeBackgroundCover = function (div) {
    $(div + " img").css("height", "100%");
    if ($(div + " img").width() < $(div).width()) {
        $(div + " img").css({
            "height": "auto",
            "width": "100%"
        });
    }
}

следующая скрипка показывает эту функцию, работающую и над горизонтальным и над вертикальным изображением.

http://jsfiddle.net/2r5Cb/

Идея состоит в том, чтобы сделать дополнительную обертку для изображения:

<div class="wrap">
  <div class="inner">
    <img src="http://placehold.it/350x150">
  </div>
</div>

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

.wrap {
  position: relative;
  width: 100%;
  height: 200px;
  background: rgba(255, 0, 0, 0.3);
  overflow: hidden;
}

.inner {
  position: absolute;
  min-width: 100%;
  height: 100%;
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.inner img {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Это работает пример: https://jsfiddle.net/kr60jroe /

Также если это имеет значение тот же эффект может быть произведен вместо того, чтобы установить "ширину", и "высота" (устанавливающий их мог повредить этот подход btw):

min-width: 100%; min-height: 100%;

или

min-width: (your desired percent of viewport width)vw; min-height: (your desired percent of viewport height)vh;

с

overflow: hidden;

на родителе

:)

Достаточно близко, чистое решение CSS для фонового размера покрывают моделирование с помощью тега img с очень хорошей поддержкой браузера (IE8 +):

.container {

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  overflow: hidden;

}

.container img {

  position: absolute;
  top: 50%;
  left: 50%;

  width: auto;
  height: auto;

  max-height: none;
  max-width: none;

  min-height: 100%;
  min-width: 100%;

  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);

}

<div class="container">
  <img src="//lorempixel.com/400/200/sports/1/" />
</div>

Если это имеет значение: это может теперь быть сделано с одним только CSS с...

новое объектное соответствие свойства CSS ( Текущая поддержка браузера )

Просто установило object-fit: cover; на img

, Вы не должны даже переноситься img в div!

СКРИПКА

img {
  width: 100px;
  height: 100px;
}
.object-fit {
  display: block;
  object-fit: cover;
}
.original {
  width: auto;
  height: auto;
  display: block;
}

<img src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>Img 'squashed' - not good</p>
<img class="object-fit" src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>object-fit: cover -
   The whole image is scaled down or expanded till it fills the box completely, the aspect ratio is maintained. This normally results in only part of the image being visible. </p>
<img class="original" src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>Original ing</p>

можно читать больше об этом новом свойстве в этом статья .

webplatform кроме того, вот скрипка от вышеупомянутой статьи, которая демонстрирует все значения object-fit свойство.

При чтении принятого ответа это ударяет меня, что мы просто тестируем на том, является ли изображение 'портретом' или 'средой':

   if (ih>iw) {//if portrait

В случае OP, правильно. Но другие могли бы иметь дело с прямоугольниками и должны взять соотношение сторон контейнера и 'дочернего '-изображения к рассмотрению:

    var int_container_width  = parseInt( 
 При чтении принятого ответа это ударяет меня, что мы просто тестируем на том, является ли изображение 'портретом' или 'средой': 
 [110] 
 В случае OP, правильно. Но другие могли бы иметь дело с прямоугольниками и должны взять соотношение сторон контейнера и 'дочернего '-изображения к рассмотрению: 
 [111]container.width()  );
    var int_container_height = parseInt( 
 При чтении принятого ответа это ударяет меня, что мы просто тестируем на том, является ли изображение 'портретом' или 'средой': 
 [110] 
 В случае OP, правильно. Но другие могли бы иметь дело с прямоугольниками и должны взять соотношение сторон контейнера и 'дочернего '-изображения к рассмотрению: 
 [111]container.height() );
    var num_container_aspect = int_container_width/int_container_height;

    var int_image_width      = parseInt( 
 При чтении принятого ответа это ударяет меня, что мы просто тестируем на том, является ли изображение 'портретом' или 'средой': 
 [110] 
 В случае OP, правильно. Но другие могли бы иметь дело с прямоугольниками и должны взять соотношение сторон контейнера и 'дочернего '-изображения к рассмотрению: 
 [111]image.width() );
    var int_image_height     = parseInt( 
 При чтении принятого ответа это ударяет меня, что мы просто тестируем на том, является ли изображение 'портретом' или 'средой': 
 [110] 
 В случае OP, правильно. Но другие могли бы иметь дело с прямоугольниками и должны взять соотношение сторон контейнера и 'дочернего '-изображения к рассмотрению: 
 [111]image.height());
    var num_image_aspect     = int_image_width/int_image_height;

    if ( num_image_aspect > num_container_aspect){
      num_scale = int_container_width/int_image_width * 100;
    } else {
      num_scale = int_container_height/int_image_height * 100;
    }