■positionをつかった画像配置方法■
▲画像サイズが決まっているときエリア内で左右中央揃え▲
ある範囲内で左右中央揃えにしたい。
画像のサイズは決まっていて、変更はない。
●ＨＴＭＬ
<div class=”pattern1″>
<img src=”../images/IMG1.jpg” alt=””>
</div>
●ＣＳＳ
.pattern1 {
width: 500px;
height: 467px;
overflow: hidden;
position: relative;
}
.pattern1 img {
position: absolute;
left: 50%;
margin-left: -400px;
}
▲エリアの中で上下左右中央揃え▲
こんな場合に使えます。
ある範囲より小さい画像
範囲内の上下左右中央の位置に画像を配置したい。
●ＨＴＭＬ
<div class=”pattern2″>
<img src=”../images/IMG1.jpg” alt=””>
</div>
●ＣＳＳ
.pattern2 {
width: 500px;
height: 500px;
position: relative;
}
.pattern2 img {
position: absolute;
display: block;
width: 400px;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
こちらも同じく画像を囲うタグにposition: relativeを指定。
画像にはposition: absoluteを指定し、上下左右を0に。
さらに、marginをautoにします。
▲画像サイズが決まっていない場合でも画像の中心を基準に上下左右中央揃え▲
画像のサイズは決まっていない（クライアントが更新したりする）。
画像の中央が必ずある範囲内の中央に配置されるようにしたい。
●ＨＴＭＬ
<div class=”pattern3″>
<img src=”../images/IMG1.jpg” alt=””>
</div>
●ＣＳＳ
.pattern3 {
width: 500px;
height: 467px;
overflow: hidden;
position: relative;
}
.pattern3 img {
position: absolute;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
これも囲うタグにはposition: relative、画像にはposition: absoluteを指定します。そして、leftとtopを50%と指定し、transform: translate3d(-50%, -50%, 0)を指定します。
widthとheightはautoにしておかないと、画面サイズが小さいスマートフォンなどで、画像が潰れてしまうことがあります。
これで、範囲内の中央に画像の中心が来るようになります。
min-width:100%とmin-height:100%は必須ではないですが、
これがない場合、画像の横か縦が範囲より小さい場合に余白ができてしまいます。
それを防ぐために、最低でも範囲内の横幅か縦幅は確保しようという記述です。
こうしておけば、例えばクライアントが更新していくような場合で画像のサイズが不明でも、
被写体は写真の中央に撮るように伝えておけば、ある程度担保とれそうです。
▲画像サイズが決まっていない場合でも画像の中心を基準に上下左右中央揃え（レスポンシブパターン）▲
3のパターンでさらに外枠がレスポンシブで変化するときのパターンです。外枠の書き方をちょっと変更します。
こんな場合に使えます。
画像のサイズは決まっていない（クライアントが更新したりする）。
画像の中央が必ずある範囲内の中央に配置されるようにしたい。
レスポンシブ
●ＨＴＭＬ
<div class=”pattern4″>
<img src=”../images/IMG1.jpg” alt=””>
</div>
●ＣＳＳ
.pattern4 {
width: 500px;
height: 467px;
overflow: hidden;
position: relative;
}
.pattern4 img {
position: absolute;
width: 20%;
height: 0;
width: auto;
height: auto;
padding-bottom: 20%;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
▲flexboxを使う▲
flexboxを使うと簡単に中央配置することができます。
●ＨＴＭＬ
<div class=”pattern5″>
<img src=”../images/IMG1.jpg” alt=””>
</div>
●ＣＳＳ
.pattern5 {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 467px;
overflow: hidden;
}
.pattern5 img {
width: 80%;
height: auto;
}