css3
Pocket

画像をある範囲内の左右中央、上下左右中央に配置させたいことはよくあると思います。

また、画像はクライアントが入れるからどんなサイズの画像が入るか分からないけど、
画像の中心がエリアの中央に配置されるようにしたいなど。

画像の配置に関する記述をいくつか紹介します。

もくじ
  1. 画像サイズが決まっているときエリア内で左右中央揃え
  2. エリアの中で上下左右中央揃え
  3. 画像サイズが決まっていない場合でも画像の中心を基準に上下左右中央揃え
  4. 画像サイズが決まっていない場合でも画像の中心を基準に上下左右中央揃え(レスポンシブパターン)
  5. flexboxを使う

1.画像サイズが決まっているときエリア内で左右中央揃え

こんな場合に使えます。

  • ある範囲内で左右中央揃えにしたい。
  • 画像のサイズは決まっていて、変更はない

サンプル

See the Pen rWwpEg by misumi (@mismith0227) on CodePen.

HTMLはこちら

<div class="pattern1">
  <img src="../images/IMG1.jpg" alt="">
</div>

imgタグを囲うタグを用意しておきます。

CSSはこちら

.pattern1 {
  width: 500px;
  height: 467px;
  overflow: hidden;
  position: relative;
}

.pattern1 img {
  position: absolute;
  left: 50%;
  margin-left: -400px;
}

画像を囲うタグにposition:relativeとoverflow:hiddenを指定します。
画像にはposition:absoluteを指定し、left:50%としておきます。

そして、画像の横幅半分のpx数分マイナスマージンで移動させます。

こうすることで、ある範囲内で左右中央に画像を持ってこれます。

2.エリアの中で上下左右中央揃え

こんな場合に使えます。

  • ある範囲より小さい画像
  • 範囲内の上下左右中央の位置に画像を配置したい。

サンプル

See the Pen jVwZNv by misumi (@mismith0227) on CodePen.

HTMLはこちら

<div class="pattern2">
  <img src="../images/IMG1.jpg" alt="">
</div>

同じくimgタグを囲うタグを用意しておきます。

CSSはこちら

.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にします。

3.画像サイズが決まっていない場合でも画像の中心を基準に上下左右中央揃え

こんな場合に使えます。

  • 画像のサイズは決まっていない(クライアントが更新したりする)。
  • 画像の中央が必ずある範囲内の中央に配置されるようにしたい。

サンプル

See the Pen 画像中央配置3 by misumi (@mismith0227) on CodePen.

HTMLはこちら。

<div class="pattern3">
  <img src="../images/IMG1.jpg" alt="">
</div>

こちらも同じ感じです。

CSSはこちら

.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%は必須ではないですが、
これがない場合、画像の横か縦が範囲より小さい場合に余白ができてしまいます。

それを防ぐために、最低でも範囲内の横幅か縦幅は確保しようという記述です。

こうしておけば、例えばクライアントが更新していくような場合で画像のサイズが不明でも、
被写体は写真の中央に撮るように伝えておけば、ある程度担保とれそうです。

4.画像サイズが決まっていない場合でも画像の中心を基準に上下左右中央揃え(レスポンシブパターン)

3のパターンでさらに外枠がレスポンシブで変化するときのパターンです。外枠の書き方をちょっと変更します。

こんな場合に使えます。

  • 画像のサイズは決まっていない(クライアントが更新したりする)。
  • 画像の中央が必ずある範囲内の中央に配置されるようにしたい。
  • レスポンシブ

サンプル

See the Pen 画像中央配置4 by misumi (@mismith0227) on CodePen.

HTMLはこちら。

<div class="pattern4">
  <img src="../images/IMG1.jpg" alt="">
</div>

CSSはこちら

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

5.flexboxを使う

flexboxを使うと簡単に中央配置することができます。

サンプル

See the Pen VmWQmp by misumi (@mismith0227) on CodePen.

HTMLはこちら。

<div class="pattern5">
  <img src="../images/IMG1.jpg" alt="">
</div>

CSSはこちら

.pattern5 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 467px;
  overflow: hidden;
}

.pattern5 img {
  width: 80%;
  height: auto;
}

さいごに

画像を配置するちょっとしたテクニックでした。

また見つけ次第、随時更新していこうと思います。

Pocket

Category : Tag :