【HTML/CSS】もう迷わない！画像をいい感じの大きさで表示する方法2選

honda 2024年10月4日

みなさん、こんにちは。どんぶらっこです。

みなさん、画像をいい感じの大きさで表示するときに、 <img> タグに直接指定を書いていたりしませんか？

それ、実はとても非効率なやり方なんです！

そこで今回は、画像を自分の好きな大きさでいい感じに表示する方法を2つお伝えします！

例えば、こんな画像があったとします。

※ダミー画像なので毎回表示がかわっちゃいます

640 * 480 の大きさの画像をいい感じに正方形にくり抜きたい！でも画像自体に手を加えたくない！

そんなときに活用できるやつです。

では、早速見ていきましょう！

relative & absolute を駆使する
- HTML
- CSS
background-image を駆使する
- HTML
- CSS
DEMO

relative & absolute を駆使する

HTML

<div class="image-iikanji-relative">
  <img src="https://placeimg.com/640/480/1" alt="">
</div>

CSS

.image-iikanji-relative {
  position: relative;
  width: 100px;
  height: 100px;
  overflow:hidden;
}

.image-iikanji-relative img {
  position: absolute;
  width: auto;
  height: 100%;
  overflow:hidden;
  transform: translate(-50%, -50%);
  left:50%;
  top: 50%;
}

一つ目の方針は relativeとabsoluteを使う方法です。

position: absoluteを単体で使うと画面に対しての絶対座標に指定になってしまいます。

例えば、 top:100px; left:100pxを指定した場合はこうなります

しかし、親要素に position:relative が指定されていた場合、その親要素から座標が指定されます。

今回は img タグの外側を div で囲い、そのdiv要素に position:relativeを使うことで、いい感じのいちにずらしているんですね！

ちなみに、div からはみ出た部分については overflow:hidden要素で隠しています。

background-image を駆使する

HTML

<div class="image-iikanji-bgimage">
</div>

CSS

.image-iikanji-bgimage {
  width: 100px;
  height: 100px;
  background-position: center;
  background-image: url("https://placeimg.com/640/480/1");
  background-size:auto 100%;
}

こちらの考え方はシンプルで、 div要素で範囲を指定して、その背景画像として画像を使っちゃえばいいんじゃないか！？というものです。

１個目よりこちらの方が考え方がシンプルですね♪