web-dev-qa-db-ja.com

CSSを使用して画像を画面の高さにサイズ変更するにはどうすればよいですか？

画面全体に画像を表示したい多くの人とは異なり、私は画像の高さだけを気にします。 CSS（できればJavasScriptではない）を使用して任意のサイズの画像を作成するにはどうすればよいですか？画像のアスペクト比、サイズ変更された幅を維持しながら、可能な最大ブラウザウィンドウの100％まで埋めます高さブラウザに関する画像の割合は関係ありません。

私はこのhtmlで作業しています：

<div class="images">
  <img/>
</div>

どうもありがとうございます！

htmlcssimageresize
9
Mohammad
img { height:100% }

または明示的にしたい場合

img { height:100%; width:auto; }

高さ100％： http://jsfiddle.net/jmarikle/vz7q2bnk/
幅100％： http://jsfiddle.net/jmarikle/vz7q2bnk/1/

編集：

この答えには注意が必要でした。デモは壊れていて、一般的に混乱していました。新しい画像で更新し、画像のインラインの性質を補正するためにルールを更新し、本文とhtml要素の高さと幅を正規化しました。

11
Joseph Marikle

これはやり過ぎかもしれません：

.img {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
}
4
Joe

また、vh、vw、vmin、vmaxのCSSユニットも確認​​することをお勧めします。これらは かなりよくサポートされています です。 100％の高さを達成する方法を説明する良い記事があります ここ 。

ところで–空白に注意してください：これは不要なマージンを追加する可能性があります。スペースを削除するか、フロートを追加するか、font-size: 0ハックを使用すると、これが整理されます。また、他の方法を使用する場合は、body要素とhtml要素にheight: 100%を設定することを忘れないでください。

4
Sam Dutton