垂直に反応するデザイン：divで画像を比例的に拡大する

Question

この非常に便利なサイトVertically Responsive Design : Keeping Things Above The Foldが見つかりました。ここでは、ブラウザウィンドウの高さ（幅ではない）を調整する際にdivを作成する方法を示しました。

私が探しているのは、画像と全く同じことをすることです。言い換えれば、ブラウザウィンドウの高さを調整しながら、その比率を維持しながら拡大縮小する画像です。

誰もが何か提案がありますか？

ありがとうございます！ UPDATED

：ここにフィドル：https://jsfiddle.net/1pu67mLg/

これは（nitinh.comから）テキストのHTMLです：

<div class="container"> 
     <div class="hero-unit"> 
      <div class="text"> 
       <h1>lorem ipsum dolor sit amet</h1> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis euismod felis. Phasellus id pretium dui proin finibus. 
       </p> 
       <p> 
        Lorem ipsum dolor sit amet <a href="#">article</a>. 
       </p> 
      </div> 
     </div> 
</div> 

そして（nitinh.comから）CSS：

.container{ 
    min-width:600px; 
    max-width:1080px; 
    min-height:100%; 
    width:150vh; 
    margin:0 auto; 
    font-family:'Lato',sans-serif 
} 

.hero-unit{ 
    min-width:600px; 
    max-width:1080px; 
    min-height:calc(690px * (90/150)); 
    height:90vh; 
    width:150vh; 
    background-color:#2fa1b2; 
    position:relative; 
    box-sizing:border-box; 
    padding:10px 30px 
} 

.hero-unit h1{ 
    font-weight:400px; 
    font-size:7vh 
} 

.hero-unit .text{ 
    font-weight:100; 
    font-size:4vh; 
    color:#fff 
} 

Answer 1

私はあなたの質問を正しく理解している場合は、ビューポートの高さに基づいて拡大縮小した画像を追加します。あなたは自分のテキストと同様に、画像を拡大縮小したいので、ちょうど通常のimgタグを追加して、そのようなvhユニットを使用する場合：

HTML

<img src="http://placehold.it/350x150" alt=""> 

CSSを

.hero-unit img{ 
    height: 40vh; 
    width: auto; 
} 

jsfiddle