実際のサイズとは異なる大きさで画像を表示したい
ウィンドウサイズに合わせて伸縮するデザインのページを作成するとき、スマートフォン向け、もしくはレスポンスシブWebデザインのページを作成するなど、実サイズでは異なる大きさで表示したいことがあると思います。さらに、最近のWebデザインでは、画像の実サイズとは異なるサイズでWebページに掲載するケースが増えています。とくに、スマートフォン向けのページを作るとき、パソコン向け・スマートフォン向けどちらにも対応するレスポンスシブWebデザインのページを作るときは、画像を実サイズで表示することのほうが少ないくらいです。そのため、画像を実サイズとは異なるサイズで表示するテクニックが必要です。画像を実サイズとは異なるサイズで表示させるのは、一般的にはその画像を親要素の幅にフィットするようにします。<img>タグに「width]100%」を指定すると、画像は親要素の幅に合わせて、縦横比を保ったまま伸縮します。
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8">
<style>
.keyvisual{
position: relative;
width: 500px;
border: 1px solid #d0d0d0;
padding: 10px;
background:#e9e9e9;
}
.title{
margin:0;
font-size:14px;
}
.title a{
text-decoration:none;
color: #000000;
}
.title a:hover{
color:#717171;
}
.thumbnail{
margin-bottom:10px;
font-size:0;
}
.thumbnail img{
width: 100%;
}
</style>
</head>
<body>
<div class="keyvisual">
<div class="thumbnail">
<img src="./images/keyvisual.jpg" alt=""/>
</div>
<div class="title">
<p><a href="#">中学生になったら部活動はどこにしようかな？</a></p>
</div>
</div>
</body>
</html>実行結果
