CSSの流体レイアウトイメージの問題

Question

大丈夫ですか、私は2つの面を持つレイアウトを作っています。左は30％、右は70％です。私はワイドスクリーンのモニターを持っているので、すべての画像は、どのように私はあまりにも良い部屋を残してそれらをしたい表示されます。しかし、低解像度と最も一般的な1024x768で、私が作った画像は左側には大きすぎ、右側には境界線から出ます。画像を自動的に小さな解像度に合わせてサイズを変更するにはどうしたらいいですか？

CSS

#left { 
    float:left; 
    width:30%; 
    height:100%; 
    position:fixed; 
    padding:20px; 
} 

#right { 
    float:right; 
    width:70%; 
    height:100%; 
    position:absolute; 
    padding:40px 20px; 
} 
#left img { 
    ?? 
} 

Answer 1

max-widthと画像にパーセンテージ値を使用してみてください。この方法では、画像はその割合を決して超えません。例えば

：

img { 
    max-width:90%; 
} 

Answer 2

あなたのイメージに応じて、あなただけの#leftのdivにoverflow: hiddenを追加することができます。

Answer 3

これを行う方法の1つは、画像を#left divの背景に追加することです。

イメージのサイズは変更されませんが、境界線には流れません。

完全なブラウザサポートはありませんが、CSS3を使用して背景をサイズ変更することができます。

background-size:100% 100%;画像サイズがすべてdivになるようにします。しかし、歪みがあるかもしれません。

Answer 4

これはそれを行います。

#left img { 
    width: 100%; 
}