高さを調整する/比を維持する

Question

現在、私は応答性の高い画像スライダを作成していますが、スライダを完全に反応させるには、事前に知っておく必要があります。幅に調整してください（例：16：9のように比率で固定）。私のコードは、このようなもの（簡略化）です。

<div style="width: 100px; height: 50px;" id="container"> 
<img src="" style="width: 100%, height:100%" id="inside"> 
</div> 

は、私はすでに、パディング、下70％などのように試みたが、内部はコンテナの高さではないパディングに対するようなものです（と思う）ので、それは私のために動作しませんか？

私は事前のおかげで、誰かが私を助けることができると思います：D

（私は私のenglischは、いくつかのより多くの質問はお気軽にお持ちの場合は、最高ではないので、それはハード私の問題を説明することが判明し、 100％高さ：自動

はより良いあなたが必要なものを説明するために、作業フィドルをしようと私はあなたが

幅で始まる必要があり、比率を維持するために）あなたを助けるために

Answer 1

を自分のベストを尽くします

Answer 2

は（ ``）または `div`年代に背景images``として画像は実際の画像要素として追加され、あなたが

#container { 
 
    width: 100px; 
 
    height: 50px; 
 
} 
 

 
#container img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div id="container"> 
 
<img src="http://florisdeboer.com/Screenshot%20(80).png" id="inside"> 
 
</div>