Сделать изображение заполнить div пропорционально и центральное изображение по вертикали

Question

Если кто-то использовал InDesign раньше, когда у вас есть изображение, размещенное внутри рамки, щелчок правой кнопкой мыши по кадру позволит вам выбрать Fill Frame пропорционально, поэтому весь кадр содержит изображение, и любое переполнение скрыто, после чего вы можете Центр содержимого.

Как этот эффект может быть достигнут в браузере?

Answer 1

Я создать fiddle, который помогает достичь этого результата.

Однако это приведет к тому, что изображение будет расширяться больше, чем его разрешение, если ширина div.frame больше ширины его изображения.

Предполагая, что следующий HTML

<div class="frame"> 
    <img src="http://stuffpoint.com/parrots/image/240658-parrots-white-parrot.jpg" /> 
</div> 

Это будет иметь следующие стили применяются

.frame { 
    width: 100%; 
    height: 200px; 
    overflow: hidden; 
    position: relative; 
} 

.frame img { 
    width: 100%; 
} 

обязательное JQuery центрировать изображение по вертикали от нагрузки и изменения размера

$(function(){ 
    centerImageVertically(); 
    $(window).resize(function() { 
     centerImageVertically(); 
    }); 
    function centerImageVertically() { 
     var imgframes = $('.frame img'); 
     imgframes.each(function(i){ 
      var imgVRelativeOffset = ($(this).height() - $(this).parent().height())/2; 
      $(this).css({ 
       'position': 'absolute', 
       'top': imgVRelativeOffset * -1 
      }); 
     }); 
    } 
}); 

UPDATE : альтернативный способ st JavaScript, приведенный выше:

$(function() { 
     var centerImageVertically = function() { 
      var imgframes = $('.frame img'); 
      imgframes.each(function (i) { 
       var imgVRelativeOffset = ($(this).height() - $(this).parent().height())/2; 
       $(this).css({ 
        'position': 'absolute', 
        'top': imgVRelativeOffset * -1 
       }); 
      }); 
     }; 

     centerImageVertically(); 
     $(window).resize(centerImageVertically); 
    });