html - % ベースの画像を CSS に追加する方法 (流体レイアウト用)

Question

わかりましたので、CSS で選択した画像を流体ベースにしたいのですが、これが私が遭遇する問題です。

これは私が頭の中でしなければならないと思うことですが、うまくいきません：

#image { background-image:pic.jpg; height:100%; width:100%; }

でも、このタグに「height:100%;」は使えませんよね？ピクセル幅に設定する必要があります。しかし、流動的にしたい場合は、ピクセル幅に設定することはできませんよね？

これを行う別の方法はありますか？ありがとう。

score 1 · Accepted Answer

私が考えている意味で「流体」を意味する場合（レスポンシブデザインの一種の「流体」）、「最大幅」を「100％」に設定すると、画像がコンテナを超えてオーバーフローしないようにする必要があります（つまり、100％の幅を超えます）。

img { max-width: 100%; }

編集：問題が高さでアスペクト比を維持する場合は、heightプロパティを指定しないでください。または、属性設定をオーバーライドする必要がある場合は、高さもauto（！important）に設定してください。

img { max-width: 100%; height: auto !important; }

score 1 · Accepted Answer

このようにすると、流動的になります。

HTML:

<img src="http://news.bbcimg.co.uk/media/images/62777000/jpg/_62777247_62777242.jpg" alt="" />

CSS:

<コード>img { 幅: 100%; } </コード>

または、幅と高さを 100% に伸ばしたい場合は、これを試してください (ただし、比率は正しくありません)。

2 に答える 2