スクロールバーを使用せずにビューポートで拡大縮小されたイメージとテキストを表示するにはどうすればよいですか？

Question

は、私は次のHTMLを持っている：

<div class="wrapper"> 
    <img class="img" src="img.png"> 
    <div clas="text"> 
     This is sample text.<br/> 
     This is sample text. 
    </div> 
</div> 

私も次のCSSを持っている：

.wrapper { 
     width: 1200px; 
     margin: 0 auto; 
    } 

画像は非常に大きなものとなります（4000PX幅、高さ3000px）。 div.wrapperの高さを設定することはできません。私は、テキストの量を仮定することはできません。 CSSを使用して、垂直スクロールバーを使用せずに完全に縮小された画像とテキストをビューポートに表示するにはどうすればよいですか？

あなたも、あなたがこれを使用することができjavascriptの関与溶液でOKの場合にはこれはjsfidilleにhttps://jsfiddle.net/c2q1w1tq/2/

Answer 1

例です。

function updateImageHeight() { 
    textHeight = $('.wrapper').height() - $('.wrapper img.img').height() 
    imgMaxHeight = $('.container').height() - textHeight 
    $('.wrapper img.img').height(imgMaxHeight) 
} 
$(function() { 
    updateImageHeight(); 
}); 
$(window).on('resize', function() { 
    updateImageHeight(); 
}) 

私はここに

をjqueryのを使用

$(window).on('resize'は、ウィンドウサイズを変更するためのソリューションも提供します。ここで

は作業jsfiddleです：
https://jsfiddle.net/Ly8sac3v/

（私はHTML/body要素のマージン/パディングを削除し、コンテナ内のすべてを包んだ場合、あなたは上記のコードを使用できることを行うことはできません。 body要素がありますが、そこに変更が必要な場合があります）。