KH-WEBLOG TOP > WEBメモ > CSS > CSSで画像をボックス内いっぱいまで表示する方法

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%);
}

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

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

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事