1

私はOliverBoermansのjQueryプラグインを使用して、画像を100％の幅と高さ（つまり、基本的にはビューポート）のコンテナーに適合させています。http://www.ollicle.com/eg/jquery/imagefit/

プラグインの要点はこれです。

$(img)
    .width('100%').each(function()
    {
        $(this).height(Math.round(
            $(this).attr('startheight')*(dim.outerWidth/$(this).attr('startwidth')))
        );
    })
    .css({marginTop: Math.round( ($(window).height() - $(img).height()) / 2 )});

startwidthandstartheight属性には、画像の実際のピクセル寸法が含まれます。

これで、画像がビューポートよりも広い場合、これは完全に機能します。ただし、ビューポートが画像よりも垂直方向に短い場合、画像がビューポートに垂直方向に収まらないことがわかりました。

このプラグインを変更して、水平方向に加えて垂直方向のフィッティングを考慮に入れて、ビューポートの寸法とアスペクト比が何であれ、画像のすべてのインチが常に完全に表示されるようにするにはどうすればよいですか？

遊ぶためのフィドルを用意しました。http://jsfiddle.net/NXJCd/-プラグインが動作していることを確認するために、結果部門のサイズを調整します。フィットした画像よりも高さを短く設定すると、画像の上端と下端がカットされます。

編集：それで、いくつかの混乱の後、私は明確にしたいです。画像をコンテナ内に比例的にフィットさせたい。すべての画像は常に表示される必要がありますが、元のサイズより大きくなることはありません。以下に視覚化しました。このために私が持っているjQueryプラグインは水平方向のフィッティング（例AとC）で機能しますが、垂直方向のフィッティングではありません（例B）。それが私が解決したいことです。

例

EDIT2：さらに混乱した後、私はそれがどのように動作するかを詳細に説明するアニメーションを作成しました。http://www.swfme.com/view/1064342

4

4 に答える 4

2

関数を変更するとoneうまくいきました：

one : function(img){
    var parentDim = $(img).parent().getHiddenDimensions();        
    var heightWidthRatio = $(img).attr('startheight') / $(img).attr('startwidth');
    var newWidth, newHeight;

    //Width > height.
    if(heightWidthRatio < 1) {            
        newWidth = parentDim.outerWidth > $(img).attr('startwidth')
            ? $(img).attr('startwidth') : parentDim.outerWidth;
        newHeight = Math.round(newWidth * heightWidthRatio);

        if(newHeight > parentDim.outerHeight) {
            newHeight = parentDim.outerHeight;
            newWidth = Math.round(newHeight / heightWidthRatio);
        }
    }
    //Height >= width.
    else {            
        newHeight = parentDim.outerHeight > $(img).attr('startheight')
            ? $(img).attr('startheight') : parentDim.outerHeight;
        newWidth = Math.round(newHeight / heightWidthRatio);

        if(newWidth > parentDim.outerWidth) {
            newWidth = parentDim.outerWidth;
            newHeight = Math.round(newWidth * heightWidthRatio);
        }
    }

    $(img).width(newWidth).height(newHeight)
        .css({marginTop: Math.round(($(window).height() - $(img).height()) / 2 )});
}

これは代わりに親のサイズを使用することに注意してくださいdiv。CSS で画像サイズが 100% に設定されているため、最初の画像のサイズが含まれている div よりも大きく、関数が最初に呼び出されたときに問題が発生する可能性があります。

編集：

上記のコードを更新しましたが、変更点は次のとおりです。

newWidth = parentDim.outerWidth;

なります:

newWidth = parentDim.outerWidth > $(img).attr('startwidth') ? $(img).attr('startwidth') : parentDim.outerWidth;

と

newHeight = parentDim.outerHeight;

なります:

newHeight = parentDim.outerHeight > $(img).attr('startheight') ? $(img).attr('startheight') : parentDim.outerHeight;

これらの変更により、画像が実際のサイズよりも大きくならないようにする必要があります。

于 2013-01-20T10:16:57.390 に答える
1

おそらくあなたが探しているものではないかもしれませんが、常に全画面画像を表示するバリアントをまとめましたが、それでもアスペクト比は保持されます。そうしないと、画像がかなり歪んで見える可能性があります。

function optSizeImage( selector ) {
    var obj;
    if(typeof selector === 'undefined' || !selector) {
        selector = '.visual img, .gallery-box img';
    }
    obj = ( typeof ( selector ) == 'string' ) ? $( selector ) : selector;
    function resizeImg() {
        var imgwidth = obj.width(),
          imgheight = obj.height(),
          winwidth = $(window).width(),
          winheight = $(window).height(),
          widthratio = winwidth / imgwidth,
          heightratio = winheight / imgheight,
          widthdiff = heightratio * imgwidth,
          heightdiff = widthratio * imgheight;
       if(heightdiff>winheight) {
        obj.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
       } else {
        obj.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });     
       }
    }
   resizeImg();
};

$(document).ready(function(){
  optSizeImage($("img"));
  $(window).bind('resize',function(){
    optSizeImage($("img"));
  });
});
于 2013-01-14T07:19:47.753 に答える
0

max-widthとmax-heightはあなたが望むものを与えませんか？最大幅と最大高さをコンテナサイズに設定します。コンテナサイズに制限する必要がありますが、アスペクト比はブラウザによって保持されます。

HTML：

<img id="testimg" src="https://www.google.co.il/images/srpr/logo3w.png"/>

JSコード：

i = -25;
function resizeme() {
    var theimg = $("#testimg");
    i++;
    $(theimg).css("max-width", 275 + (i * 5));
    $(theimg).css("max-height", 95 + (i * 2));
}
setInterval(function () {resizeme();}, 500);

このフィドルをチェックしてください。

于 2013-01-19T20:21:45.393 に答える
0

アスペクト比は重要ですか？この CSS のみのソリューションを確認してください: http://jsfiddle.net/Sdush/

[外側の div を拡大] リンクをクリックして、画像が拡大されていっぱいになるのを確認します。

コードは次のとおりです。

<div id="out">
  <img id="expand" src="someImage.jpg" />
</div>

...そしてCSS：

#out{width:800px;height:600px;}
#expand{width:100%;height:100%;}

ただし、これは画像の縦横比を尊重せず、コンテナーの識別可能な幅が必要です。

于 2013-01-14T06:50:19.530 に答える