レスポンシブWEBデザイン 背景画像の高さを

質問

レスポンシブWEBデザインで、お知らせなどの項目の背景を画像にし、テキストの量に応じて高さが調整できないかと思っています。
“background: cover”を使えば、ウィンドウサイズに合わせて可変はしますが、高さはテキストの量に応じて調整する方法をご存知の方、いらっしゃいましたらご教授願えませんでしょうか。

よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

その場合は、
background-size:contain; /*横がはみ出しますが図は変形しない*/
もしくは、
background-size:100% 100%;/* 図を変形してあわせる */
ですかね。

なお、CSS3の機能ですからbackgroundの一括指定ではなく。background-sizeと個別に後から指定したほうが良いでしょう。
　後方互換を考えるならIMGで配置して、display:blodkと合わせて指定する必要があることもあります。
　そのあたりは臨機応変に

お礼

アドバイス、ありがとうございます。
さっそく実践してみたところ、思い通りになりました。
ありがとうございました。
また、なにかありましたらよろしくお願いします。

回答No.1

ORUKA1951

＞高さはテキストの量に応じて調整する
では、何をされたいかがわかりません。

一括指定ではわかりにくいので
background-size:の値は、
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain( http://www.w3.org/TR/css3-background/#ltbg-sizegt )
　となっています。
　たぶん、<percentage> | auto ]{1,2} | cover | contain
のいずれかを期待されているのだと思います。

＞高さはテキストの量に応じて調整する
とは
・縦横比を変えずに横もしくは縦の狭いほうにあわせる。
・縦横比を変えずに横もしくは縦の長いほうに合わせて画面全体を覆う。
・要素の大きさに合わせて縦横比を変えて覆う。
・縦横いずれかのサイズに合わせて貼る
　のどれなのでしょう。

補足

ご返信、ありがとうございます。

すいません、表現がたしかにわかりにくいですね。
"background-size:cover"だと、ウィンドウサイズを縮小すると縦横均一に縮小されますが、それだと例えば、箇条書きテキストが5行あった場合、下2行（若しくは3行）がはみ出してしまうので、5行分ちゃんと入るように縦を長くしたいと思っています。
これでも表現厳しいかもしれませんが、上記の条件だと、

・縦横比を変えずに横もしくは縦の長いほうに合わせて画面全体を覆う。
・要素の大きさに合わせて縦横比を変えて覆う。

このふたつのどちらかなと思います。

なんともうまく表現できずに申し訳ありません。

よろしくお願いします。