初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。

画像をウィンドウサイズに合わせて画像を拡大縮小する方法。レスポンシブ時代の画像imgタグ。

サイト制作でサムネイルを一覧表示したいりするときに便利なTipsをご紹介します。

通常は画像幅固定でウィンドウサイズに合わせてコンテナ内に流し込みなんて事をしますが、
ここ最近、アイチャッチになる画像やサムネイルもウィンドウサイズに合わせて拡大縮小表示されるサイトが増えてきてます。

方法は下記の通りです。

HTML

<p class="variable"><img src="" alt="画像だよ" /></p>

CSS

配置した画像がウィンドウサイズに合わせて縮小拡大されます。

p .variable img{width:100%;}

幅90%で可変します。

p .variable{width:90%;}
p .variable img{width:100%;}

最小の幅と最大の幅を指定して可変にする方法。

p.variable {
   max-width: 180px; 
   min-width: 120px;
}
p.variable img { width: 100%; }
ダイレクト特集ページ用バナー(ダウンロード版)

初心者も簡単ブログにコピペだけ!1クリック高単価7〜42円。登録無料最短1分でスタート。