jquery - 使图像按比例填充 div 并将图像垂直居中

Question

如果以前使用过 InDesign，当您将图像放置在框架内时，右键单击该框架将允许您选择按比例填充框架选项，以便整个框架包含该图像并且隐藏所有溢出，然后您可以居中内容。

如何在浏览器中实现这种效果？

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

更新:构建上述 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);
    });