私は、各エントリの家の画像を持つ家のリストのためのデータベースを持っています。画像は第三者によってアップロードされ、画像はランダムな幅と長さで送信されます。いくつかは正方形です、いくつかは肖像画、いくつかは風景などです.JavaScriptを使用しないと、イメージを正方形のdivに完全に埋め込む最良の方法は何ですか（200px x 200pxなど）。私は、各divの背景イメージとしてイメージを使用し、 "display：cover"を使用すると、ブラウザの互換性の問題があるかどうかは分かりませんが、もっと良い方法があると思います。助言がありますか？正方形のボックス内の可変画像のアスペクト比
を、代わりにこれを使用これは全員にまともな経験を与える最善の方法です：
div {
background-position: 50% 50%;
background-size: cover;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
img {
position: absolute;
max-width: 100%;
max-height: 100%;
left: calc(-2000px);
}<div style="background-image: url(http://placehold.it/400x150)">
<img src="http://placehold.it/500x200" />
</div>基本的には、利用可能な場合スケーリングするためにバックグラウンド・サイズを使用して、calcをサポートしていないすべてのブラウザに画像を表示します。 2つの鳥、1つの石。
イメージのサイズを明示的に定義しないでください。あなたが使用してそれを中央その後、background-imageを使用したい場合は
max-width: 100%;
max-height: 100%;
OR：互換性は、あなたが気にするものである場合
background-position: center center;
background-size: cover;
これは便利です...もし画像がボックスに_fitするのではなく、image_のボックスに_fillする方法に関する質問ではない。イメージを200x200ピクセルにするための正当な使用例があります。 – somethinghere
'background-image'を使っているのはSEOにとって悪いです[link]（http://stackoverflow.com/questions/16542606/background-images-and-seo） – Himanshu
はい、どのようにすれば解決策が有効な解決策になりますかしかし、それは問題を解決しませんでした。上記の私の提案された解決策は_both_です。 – somethinghere
これを行う方法はいくつかありますが、IE以外のすべての主要ブラウザでサポートされているobject-fit: coverを使用することをお勧めします。 IEとEdgeで動作するソリューションが必要な場合は、how to implement a fallbackをチェックアウトするか、background-size: coverを使用してフォールバックしてください。
Hotdangety、that snuck up私に。まるでそれがまともな互換性の前に 'オブジェクトフィット'の聞いたことはありません。驚くばかり！ – somethinghere
さまざまなサイズの画像を使用すると、画像がピクセル化され、HTMLを表示する前に同じサイズになるように画像を処理するバックエンドコードがある方がいいです...考えてみてください – optimus
ドン'background-size：cover;'のブラウザの互換性については心配しないでください（ 'display'ではなく、別のものです）。 IE10以降とは別に、非常に幅広くサポートされています（http://caniuse.com/#search=background-size）。その上、古いブラウザでもそれを表示し、途切れてしまいます低品質の経験（より良いブラウザを手に入れるためにそれらを吹かなければならない）。古いブラウザの場合、画像をdiv内に配置して拡大縮小（ 'max-height：100％; max-width：100％;'）し、 'position：absolute; left：calc（-9999px）'ルールを追加することができます。新しいブラウザで画像を隠す – somethinghere