CSSイメージの横方向のサイズ変更

Question

div.image { 
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg'); 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 500px; 
    height: 500px; 
} 

私は500x500 imageを表示するために上記のCSSコードを使用しています。しかし、私はウィンドウのサイズを変更するとnot resize（スクロールバーが表示されます）の画像が表示されますが、horizontallyからresizeに変更すると、その新しい幅が画面に収まるようになりますか？おかげ

Answer 1

いけないPX Instedの使用％

div.image { 
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg'); 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 50%; 
    height: 50%; /* both as much you want */ 
} 

または他のメディアクエリを使用して幅と高さを指定します。