画像をブラウザウィンドウの高さに合わせて、ウィンドウサイズに動的に反応させようとしています。ブラウザウィンドウに合わせて画像を自動的にサイズ変更する方法
同じサイズを維持するには画像のアスペクト比が必要ですが、大きな画像では画像が元の解像度より大きくなることがあります。
私は、画像が画面の外にこぼれてスコッリング効果を作りたくありません。
イメージは、縦と横の両方のコンテナの内側にセンタリングされている必要があります。
Here is an example of what I am trying to achieve.
あなたがこれまでに試したものをクリアしていないと我々はドン」：また、このplunkerを参照してくださいしかし、画面の比率に応じて、あなたのイメージの大部分が
を遮断することができ、目に見えるbackground-colorは存在しません任意のコードを参照してください。私はとにかく答えようとするでしょうし、おそらくそれはあなたを助けるでしょう。
まず、レスポンシブレイアウトで作業する場合は、常にviewport height and widthで要素のサイズを設定してください。これにより、サイズを変更したり、画面の大きさに関係なく、ブラウザのサイズに関連してコンテンツを保持するのに役立ちます。それを超えることはありませんので、divは両方のウィンドウの高さと幅の80％を大きさで、この例では
div {
width:80vw;
height:80vh;
}
img {
max-width:100%;
height:auto;
max-height:100%;
}
の作業例here
：
このコードでは、あなたのサイトに対応する画像を挿入するに役立つかもしれませんビューポート。マックスimgの尺度は、アスペクト比が維持されることを保証し、height:auto;は100％である。画像はdivを最大許容値に合わせます。 display:table-cell; vertical-align:middle; text-align:center;をDIVに設定すると、イメージを快適に中央に配置できます。
別の解決策は、次のようになります。
background-image:url(' ');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
は `私がしようとしています...` here
深い答えをありがとう。これはまさに私が探しているものです。どのようにウィンドウをスクロールしなくても、このdivの周りに白いマージンを置くことができますか？ – Breageside
黄色の背景を使って、画像へのDIVの相対的なサイズを示したところです。 Check https://jsfiddle.net/ecj81dex/5/ – freewheeler
@Breageside、あなたはアウトラインを使うことができます：{any-width} solid #fff; – Eggineer
あなたexempleような何かを行うには、あなたはbackground-size:coverを使用することができます。
coverスケール画像、（もしあれば）その固有のアスペクト比を維持しながら、最小サイズの幅と高さの両方が完全に背景配置領域を覆うことができるようになっています。
これは、背景画像がすべてをカバーしていることを確認します。 https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview
を、それをチェックアウト。あなたが試していることを共有してください。これは 'height：100％; 'background-size：cover 'を使って' background-size：cover'を作成します。 –
このjsプラグインを試してください。http://johnpolacek.github.io/imagefill.js/ – Jason
@位置：中心の中心。この2行を書くことは、この2行を書くためにjQueryに依存するプラグインを含めるよりも優れています。 –