スマートフォンで「overflow-x」が効かない時の対処法
スライドアニメーションの使用等で画面全体をマスクしたい時に、「overflow-x」を使…
画像を表示枠いっぱいに表示する場合に、背景画像や「position」等で対応していたけど、「img」タグに一行追加するだけで縦横比を変えずに簡単に実装できる方法があったのでメモ。
img {
width: 100%;
height: 100%;
object-fit: cover;
}
上記の「object-fit」プロパティーを指定の「img」に追加するだけ。
幅と高さは親要素で設定していない場合は指定する。
値 | 説明 |
fill(初期値) | 表示枠内を満たすように縦横比を変えながらリサイズ。 |
cover | 縦横比を保持して表示枠いっぱいにリサイズ。 縦横のうち小さい方を基準にして自動的にリサイズし、表示枠からはみ出した部分はトリミングされる。 |
contain | 縦横比を保持し、表示枠に収まるようにリサイズ。 幅と高さのうち大きい方のサイズに合わせて比率を保持して表示枠にフィット。(不足部分は余白が発生) |
none | リサイズせず、そのまま表示。 |
scale-down | none と contain のうち、小さい方のサイズに合わせて表示。 |
上記の設定の場合の場合、画像はデフォルトで中央に配置されます。
画像の中でフォーカスしたいポイントが中央にある場合にはよいですが、そうでない場合は「object-position」を使用します。
初期値は、object-position: 50% 50% でセンター配置。
0% 0%は左上、0% 100%は左下、100% 0%は右下、100% 100%は右下配置となります。
object-position: 左位置 上位置;
img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 0px 0px;
}
便利な「object-fit」ですが、IEには対応していません。
既に公式でのサポートもなくなり、対応が不要なところも多い中、一部の企業では対応が求められることもあるので、対応方法を記載。
GitHubで公開されている「object-fit-images」をダウンロードし、HTMLのhead内に「ofi.min.js」を読み込みます。
ダウンロードが面倒な場合はCDNの用意もあります。
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>
object-fitを使いたいページで関数を呼び出し、実行します。
$(function(){
objectFitImages();
});
CSSファイルで、object-fitを使用したいセレクターに「font-family: ‘object-fit: 属性値;’; 」を追記する。
object-fit: cover;
font-family: 'object-fit: cover;'; /*IE対策*/
object-fit: contain;
font-family: 'object-fit: contain;'; /*IE対策*/