CSSで画像をボックス内いっぱいまで表示する方法 | コーディング・プログラミング・WEB制作ブログ

CSSで画像をボックス内いっぱいまで表示する方法

CSSの背景で指定する

backgroun-size:cover;

と同じような感じで画像を枠内いっぱいまでの表示にする方法をメモ。

HTML

<div><img src="sample.jpg" alt=""></div>

CSS

div{
    height: 150px;
    overflow: hidden;
    position: relative;
    width: 150px;
}
div > img {
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

でＯＫ。
上記の場合だと150px×150pxのボックス内全体に画像が収まる形になります。

アイキャッチ画像等を動的に読み込むときなどにサイズを揃えられるので
見た目がガタガタにならず便利です。

案件探しに！絶対登録しておきたいクラウドソーシングサービス3選【評価と経験談】：ビジネス・副業

CSSのおすすめ参考書

これからWebをはじめる人のHTML＆CSS，JavaScriptのきほんのきほ [ たにぐちまこと ]

楽天ブックス

¥2,838 （2024/10/08 17:01時点 | 楽天市場調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ