CSSで背景画像の比率保持、拡大縮小はできませんか？

実現できなく悩んでいます。

例えば縦100px、横200pxのサイズが基本サイズとします。
背景画像をCSSで指定し、ブラウザの開閉で画像幅を拡大縮小したいです。
色々と試して、background-size:というので指定が出来るのですが、比率を保持したままの表示が出来ません。

ブラウザを大きくした場合と小さく閉じた場合の画像の比率を保持したまま設定は出来ないものでしょうか？イメージとしてはブラウザを半分にしたら、縦50px、横100pxになるイメージです。

background-size:で色々と試してみたのですが、画面いっぱいになったり、％で指定しても比率が崩れた表示になってしまいます。

どなたか詳しい方いらっしゃいましたらアドバイスいただけないでしょうか。
よろしくお願いします。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/04/18 18:39

背景画像はあくまで背景画像ですから、それはできません。

￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣★とっても重要です。
なぜなら、背景はそのブロックのサイズに本来は依存するもので自身のサイズを参照してはまずいからです。
　例えば視覚障害のあるユーザーが文字を拡大したら背景がちょん切れたりしたらまずいでしょ。

　もし画像のアスペクト比を保持して表示しなければならないとしたら、それはもはや背景ではなくそのページのコンテンツのひとつなのですよ。
　コンテンツでしたら、画像要素は置換インライン要素ですから、
img{
display:block;/*なくても良いが */
width:100%;height:auto;
}
で横幅優先で表示されます。なぜなら、画像はコンテンツなのですから・・

　これはスタイルシート全般で言える事です。

この回答へのお礼

有難う御座います。
なるほど、そうでしたか…。

基本的な部分で意識が間違っているようでした、有難う御座います。
どうしても一箇所だけは、そのようにしないといけないので、PHPとjavascriptでサイズ取得して画像に投げたいと思います。
ありがとう御座いました！m__m

お礼日時：2015/04/18 18:48