固定されたコンテナの中にイメージを常に完全かつ反応的に表示させますか？

Question

私は次のようなHTMLがあります。

<div class="me"> 
    <img src="IndianRemovalAct-final.jpg"> 
</div> 

と次のスタイル：

.me { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
} 

/* method 1*/ 
img { 
    width: 100%; 
    height: auto; 
} 

/* method 2*/ 
img { 
    width: auto; 
    height: 100%; 
} 

を私はイメージが応答作るために上記の二つの方法を試してみました。しかし、ブラウザの幅を狭くすると、画像の一部がビューポートの外側になります。私は固定された位置にあるコンテナの中にイメージを完全かつ反応的に表示したい。イメージはかなり大きく、私は実装をやっています。

ありがとうございます。

Answer 1

私はあなたが望むものを提案していますか？

<div class="me"> 
    <img src="https://unsplash.it/900/900"> 
</div> 

.me { 
    position: fixed; 
    height: 100%; 
    width: 100%; 

} 

img { 
    max-width: 100%; 
} 

Answer 2

私はあなたが画像の縦横比を維持したいと仮定していますので、私は別のルートを行ってきました：

.me { 
     position: fixed; 
     height: 100%; 
     width: 100%; 
     background: url('http://placehold.it/350x150') no-repeat center center fixed; 
     background-size: cover; 
    } 

<div class="me"></div> 

例：ここではhttp://jsbin.com/woqijaxoqu/edit?html,output

Answer 3

は作業思わソリューションです。私の投稿への回答からの入力に基づいています。

img { 
     max-width: 100%; 
     max-height: 100%; 
    } 

この解決策は "max-"を提案する人々に基づいています。

ありがとう、SO人！