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

Question

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

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

Answer 1

我创建了一个有助于实现此结果的小提琴。

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