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