web-dev-qa-db-ja.com

高さに関連してブラウザウィンドウに合うように画像の自動サイズ変更を行う方法

画像をブラウザウィンドウの高さに合わせて、ウィンドウサイズに動的に反応させようとしています。

画像のアスペクト比を同じに保つ必要がありますが、大画面で表示した場合、画像は元の解像度よりも大きくなる可能性があります。

画像が画面の外にこぼれて、スコーリング効果が発生しないようにします。

画像は、垂直方向と水平方向の両方でコンテナの中央に配置する必要があります。

これが私が達成しようとしていることの例です。

htmlcssimageresponsive-images
2
Breageside

これまでに何を試したかは明確ではなく、コードも表示されません。とにかく答えようとします、そして多分それはあなたを助けるでしょう。

まず、レスポンシブレイアウトで作業するときは、常に要素のサイズを viewport height and width で設定してください。これにより、サイズを変更したかどうかや画面の大きさに関係なく、ブラウザのサイズに応じてコンテンツを維持できます。

このコードは、レスポンシブ画像をサイトに挿入するのに役立つ場合があります。

div {
   width:80vw;
   height:80vh;
}
img {
   max-width:100%;
   height:auto;
   max-height:100%;
}

実例 here

この例では、ウィンドウの高さと幅の両方の80％のサイズのdivであるため、ビューポートを超えることはありません。最大imgの測定値はdivの100％であり、height:auto;はアスペクト比を維持することを保証します。次に、画像はdivを許可されている最大値に合わせます。 display:table-cell; vertical-align:middle; text-align:center;をDIVに設定すると、画像を快適に中央に配置できます。

別の解決策は次のとおりです。

 background-image:url(' ');
 background-size:contain;
 background-repeat:no-repeat;
 background-position:center;

それをチェックしてください ここ

12
freewheeler

object-fit CSSプロパティ、コンテナなしで実行できます：

img {
  height: 100vh;
  width: 100%;
  object-fit: contain;
}

ブラウザサポート を参照してください。

0
Aidan Feldman

あなたの例のようなことをするために、あなたはbackground-size:coverを使うことができます。

cover

固有のアスペクト比（存在する場合）を維持しながら、画像の幅と高さの両方が背景の配置領域を完全にカバーできるように、画像を最小サイズに拡大縮小します。

これにより、背景画像がすべてをカバーしていることを確認できます。目に見えるbackground-colorはありませんが、画面の比率によっては、画像の大部分が切り取られる可能性があります

このプランカーも参照してください： https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview

0
Maxouhell