指定する方法もあります。好みの位置にフォーカスされるよう調整してみてください。トリミングせずに余白を表示する画像をトリミングせず、余白を表示してボックスの中央に画像を表示することもできます。先程の猫ちゃんの画像の例で違いを見てみましょう。CodePen.わかりやすいようにボックスに背景色と線を追加してみました。違い、画像の幅と高さのうち大きい方のサイズに合わせて比率を保持して画像を表示します。Webサイトのデザインや見せ方に合わせて、うまく使い分けましょう。以外にも使える値があります。全部で5種類の値が指定できるので、必要に応じて変更してください。fill(初期値)ボックス内を満たすように縦横比を変えながらリサイズされます。cover縦横比を保持してボックスを完全に覆うようリサイズされます。縦横のうち小さい方を基準にして自動的にリサイズし、ボックスからはみ出した部分はトリミングされます。contain縦横比を保持し、ボックスに収まるようにリサイズされます。幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。noneリサイズせず、そのまま表示します。うち、小さい方のサイズに合わせて表示します。これらの値を適応させると、それぞれこんな感じで表示されます。プロパティーはIEとEdgeに対応していません。様々な方法がありますが、今回はobject-fit-imagesを使った対応方法を紹介します。ファイルの読み込みまずはGithubからobject-fit-imagesのファイルをダウンロードします。「dist」フォルダー内にある「ofi.min.js」を利用します。ファイルを保存したらHTMLで読み込みましょう。タグを使って画像を表示。「object-fit-img」というクラスを付与しました。