ビューポートに比例して倍率を調整する

Question

高さがビューポートと同じになるまで、divのサイズを比例して小さくする小さな関数を記述しました。これは完全に機能します。私は修正したい2つの問題があります

1. これを行うクリーナーの方法はありますか？
2. ビューポートの高さが低くなると、ビューポートを上げたときにスケールアップされません。

container divがビューポートより高くなることはありません。これは、コンテンツが応答するのでcontainerのwidthを設定することによって制御する必要があります。デモンストレーションの目的で幅100％のシンプルな画像を使用しました。ブラウザのサポートが不足しているため、vhまたはvwを使用していません。私はIE8をサポートする必要があります。アカウントにブラウザのサポートを撮る

Demo Jsfiddle

function setImageViewPointHeight() { 

    // get current viewport height 
    var targetHeight = $(window).height(); 

    // get current container height 
    var containerHeight = $('.container').height(); 

    // get current container width 
    var containerWidth = $('.container').width(); 


    // only set width if container is higher than viewport 
    if (containerHeight > targetHeight) { 

    // keep reducing container height/width value by 0.1% until target is reached 
    while (containerHeight > targetHeight) { 
     containerHeight = containerHeight - (containerHeight * .01); 
     containerWidth = containerWidth - (containerWidth * .01); 
    } 

    // now we have desired calculated width 
    $('.container').width(containerWidth + 'px'); 
    } 

} 

Answer 1

私は、このアプローチの問題は表示されません。それは私の見解から十分にきれいに見えます。

ビューポートの高さを下げたときのコンテナの高さ調整の問題を解決するには、関数が呼び出されたときにwidthをinitialに設定するだけです。

function setImageViewPointHeight() { 

    $('.container').css('width', 'initial'); <-- add this 

    var targetHeight = $(window).height(); 
    var containerHeight = $('.container').height(); 
    var containerWidth = $('.container').width(); 

    if (containerHeight > targetHeight) { 
    while (containerHeight > targetHeight) { 
     containerHeight = containerHeight - (containerHeight * .01); 
     containerWidth = containerWidth - (containerWidth * .01); 
    } 
    $('.container').width(containerWidth + 'px'); 
    } 

} 

JSFiddle

Answer 2

私は、ビューポートにdiv要素をスケールするvwvh CSSユニットを使用します。

https://css-tricks.com/viewport-sized-typography/

IE8がそれをサポートしていませんが、あなたはそれあなたがこのブラウザのサポートと一緒に暮らすことができる https://github.com/saabi/vminpoly