【CSS】<img>を上下左右中央で、エリアいっぱいに配置する

# やりたいのはこれ！
![上下左右中央配置 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527850/d6031484-0daa-a74b-3165-5d73a763ce22.png)




作りたいのは、よくあるサムネイル付き記事の 一覧ページ↑↑。
（ほんでもって、ホバーしたら画像がふわっと拡大表示なんかしたりね、するよね。ね。）（←後述します）

今回は、cssだけでごにょごにょがんばります。


# 実装
3カラムとか作る前に、一旦width100%でコンポーネントを作ります。
![widthが100% (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527850/7783a450-1e9d-d481-f732-5e0343e8b34f.png)



```index.html
<article class="articleWrap">
  <a class="thumbnailWrap" href="#">
    <img class="thumbnail" alt="画像のalt" src="画像のパス" />
  </a>
  <h3 class="title"><a href="#">記事タイトル</a></h3>
  <p class="text">どんな画像を入れてもピッタ。。。</p>
</article>
```

```style.scss
a:hover{
  cursor:pointer;
}
.articleWrap {
  width: 100%;
  background-color:#eee;
}
.thumbnailWrap {
  overflow: hidden;
  position: relative;
  display:block;

  height: 200px;// ←画像の高さを設定します。
  /* （※ @mediaで、ウィンドウ幅ごとにheightを書き分けている↓↓のは、リキッドデザインに対応するためです。
  この一手間で、ウィンドウ幅が伸び縮みしてもきれいに表示させることが出来ます！）*/
  @media (min-width: 641px) and (max-width: 1000px) {
    height: 18vw;
  }
  @media (max-width: 640px) {
    height: 48vw;
  }
}

$times: 5; //何倍
.thumbnail {
  min-height: calc(100% * #{$times});//←ここがポイント！
  min-width: calc(100% * #{$times});//←ここがポイント！
  transform: translate(-50%, -50%) scale(calc(1 / #{$times}));//←←scale(1/5) = scale(0.2)ここがポイント！
  position: absolute;
  top: 50%;
  left: 50%;
}
```

↓何してる？？

`<img class="thumbnail">`を**5倍して、5で割ります**
からのー、
**translateとpositionで中央配置！**
すると、ほーらできあがり＼(^o^)／
($timesは、5にしています。いろんな画像をはめてみたところ、5で問題なく表示できました。)





## ホバーしたらふわっと拡大表示させちゃう😊
せっかくなので、ユーザーがリンク領域だと認識できるように、
ホバーしたらアニメーションをさせてみましょう！

htmlに、classを1つ、`zoomAnimation`を新たに付加します。
場所は、`thumbnail`のところです。

```index.html
<article class="articleWrap">
  <a class="thumbnailWrap" href="#">
    <img class="thumbnail zoomAnimation" alt="画像のalt" src="画像のパス" />
  </a>
  <h3 class="title"><a href="#">記事タイトル</a></h3>
  <p class="text">どんな画像を入れてもピッタ。。。</p>
</article>
```

scssには、以下のstyleを追記します。↓

```style.scss
// 記事をホバーしたら。。
.zoomAnimation {
  transition: all 0.5s ease;
  transform-origin: center;
  &:hover{
    transform: translate(-50%, -50%) scale(calc(1 / #{$times} + 0.02));//←0.02足す
  }
}
```

scaleを0.2から、ホバーしたら0.22にして、少しだけふわっと大きくなるようにしました。
ってことで、これでコンポーネントは完成！

<p class="codepen" data-height="392" data-theme-id="default" data-default-tab="css,result" data-user="sayaka_kiyose" data-slug-hash="OJPpjVJ" style="height: 392px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="どんな画像も中央でぴったりフィット">
  <span>See the Pen <a href="https://codepen.io/sayaka_kiyose/pen/OJPpjVJ">
  どんな画像も中央でぴったりフィット</a> by sayaka kiyose (<a href="https://codepen.io/sayaka_kiyose">@sayaka_kiyose</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 3カラムにして見た目を整えよう！
![widthが100% (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527850/191406ba-29d2-c6d9-e03d-1e88910744fd.png)

[前に書いた記事内の、3カラムレイアウト](https://qiita.com/kiyose_sayaka/items/3cbf8787d3f1f0811d91#pc%E3%81%A73%E3%82%AB%E3%83%A9%E3%83%A0sp%E3%81%A71%E3%82%AB%E3%83%A9%E3%83%A0)の`<li class="col3ListItem">`の中に、
`<article>`タグごと放り込むだけ！おわり！

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="sayaka_kiyose" data-slug-hash="yLyVprZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="【3カラム】どんな画像も中央でぴったりフィット">
  <span>See the Pen <a href="https://codepen.io/sayaka_kiyose/pen/yLyVprZ">
  【3カラム】どんな画像も中央でぴったりフィット</a> by sayaka kiyose (<a href="https://codepen.io/sayaka_kiyose">@sayaka_kiyose</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# background-imageじゃだめなの？
いざCMS化して、方向もサイズもバラバラな画像たちが
imgタグに流し込まれたら、崩れてしまった。。。
だったらいっそのこと、
imgタグなんかやめちゃって、background-imageからのbackground-size:coverにしちゃって。。。↓
![名称未設定ファイル (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527850/69f8d743-b491-5978-3603-4694219b3748.png)

↑↑こんな風に出来たらなんて楽なんだろう。


でも、CSSはあくまで装飾。
コンテンツによっては、`<img>`タグとして画像を表示させたいときもありますよね。
見た目だけOKではなく、
セマンティックなマークアップをしていきましょう。！！


<br><br><br>
長くなりましたが終わり！