【CSS/html】画像や背景画像を横幅いっぱいに拡大する方法
「トップイメージを設置するために画像をウィンドウサイズいっぱいにしたい」
「ブログ記事内の親の幅に画像を合わせたい」
画像を横幅いっぱいに拡大する方法を解説します。もちろんレスポンシブ対応しています。
画像はimgで表示する方法と背景画像であるbackgroundで表示する方法があります。
それぞれの場合の方法を解説します。
imgについて詳しくはこちら↓
backgroundについて詳しくはこちら↓
親要素の幅に合わせる
img版
imgを親の幅に合わせるにはimgにwidth: 100%を指定します。
<style>
.example{
border: 2px solid #000;
}
.example img{
width: 100%;
height: auto;
display: block;
}
</style>
<div class="example">
<img src="cat.jpg" alt="">
</div>imgに「height: auto」を指定すると画像の縦横比を維持して大きくなります。
親要素にpaddingがあると合わなくなるため、親のpaddingは0にしておきましょう。
background版
backgroundで画像を横幅いっぱいにするには「background-size:100% auto」または「background-size:cover」を指定します。
<style>
.example1-2{
border: 2px solid #000;
background: url(cat.jpg) no-repeat 0 0 / cover;
width: 100%;
padding-top: 56%;
}
</style>
<div class="example1-2"></div>heightでは親の幅を基準として縦横比を維持できません。
paddingなら横幅を基準に縦横比を維持できます。
padding-top（またはpadding-bottom）に幅を基準とした割合を指定します。
16:9なら、9÷16×100％＝56.25%です。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
ウィンドウサイズに合わせる
img版
imgをウィンドウサイズに合わせるにはimgにwidth: 100vwを指定します。
vwはウィンドウ（ブラウザ）の横サイズを基準とする長さの単位です。
<style>
.example2{
width: 300px;
border: 2px solid #000;
margin: auto;
}
.example2 img{
width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
height: auto;
display: block;
opacity: 0.5;
}
</style>
<div class="example2">
<img src="cat.jpg" alt="">
</div>中央寄せしている枠からはみ出させています。
imgに「max-width:100%」が指定されているとはみ出せないため「max-width:none」を指定して解除しましょう。
imgに「width: 100vw」をかけただけだと親要素の左を基準に右にずれた感じになります。
margin-leftのマイナス値を指定してウィンドウの左にそろうようにしましょう。
この記事でずれているのは親の位置がサイトのど真ん中でないためです。
サイトのど真ん中なら「margin-left: calc(-50vw + 50%)」でそろいます。
ちなみにブラウザ幅を狭めてスマホ幅にすると当サイトでもど真ん中になります。
中央寄せにする方法について詳しくはこちら↓
background版
backgroundを指定している要素に「width: 100vw」を指定するとウィンドウサイズのサイズになります。
高さは「padding-top:56%」でもいいですが、今回はheightでも指定できます。
「height: 56vw」と指定すると横幅100vwに対して16:9の割合の高さにできます。
<style>
.example2-2{
border: 2px solid #000;
width: 300px;
margin: auto;
}
.example2-2>div{
background: url(cat.jpg) no-repeat 0 0 / cover;
width: 100vw;
height: 56vw;
margin-left: calc(-50vw + 50%);
opacity: 0.5;
}
</style>
<div class="example2-2">
<div></div>
</div>サイトの背景画像として横幅いっぱいにする
background版
サイトの背景画像にするにはbodyにbackgroundを指定しましょう。
ここでは「no-repeat」にしていますが繰り返す場合はrepeatにしましょう。
<style>
body{
background: url(cat.jpg) no-repeat 0 0 / cover;
}
</style>
<body></body>縦を固定して横幅いっぱいにする
img版
横幅いっぱいにするのは先述したように「width: 100%」や「width:100vw」を指定します。
そのうえで「height: ○○px」と指定すると縦を固定できます。
ただしこれだけだと画像の縦横比が保てません。
「object-fit: cover」を指定すると指定した幅と高さに合わせてトリミングされます。
<style>
.example3{
width: 100%;
height: 200px;
object-fit: cover;
}
</style>
<img class="example3" src="cat.jpg" alt="">background版
横幅いっぱいにするのは先述したように「width: 100%」や「width:100vw」を指定します。
先ほどは高さをpadding-topで指定しましたが、固定する場合は「height: ○○px」と指定しましょう。
高さを固定した場合は背景画像の位置も注意しましょう。「center center」と指定すると真ん中を基準に上下が切れるようになります。
<style>
.example3-2{
border: 2px solid #000;
background: url(cat.jpg) no-repeat center center / cover;
width: 100%;
height: 200px;
}
</style>
<div class="example3-2"></div>【まとめ】画像を横幅いっぱいに拡大する方法
親要素の幅に合わせる
img版
img{
width: 100%;
height: auto;
}background版
div{
background: url(cat.jpg) no-repeat 0 0 / cover;
width: 100%;
padding-top: 56%;
}ウィンドウサイズに合わせる
img版
img{
width: 100vw;
margin-left: calc(-50vw + 50%);
max-width: none;
height: auto;
}background版
div{
background: url(cat.jpg) no-repeat 0 0 / cover;
width: 100vw;
height: 56vw;
margin-left: calc(-50vw + 50%);
}サイトの背景画像として横幅いっぱいにする
body{
background: url(cat.jpg) no-repeat 0 0 / cover;
}縦を固定して横幅いっぱいにする
img版
img{
width: 100%;
height: 200px;
object-fit: cover;
}background版
div{
background: url(cat.jpg) no-repeat center center / cover;
width: 100%;
height: 200px;
}以上、画像を横幅いっぱいに拡大する方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
