CSS

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

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

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

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

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

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

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

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

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

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

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要素で範囲を指定して、その背景画像として画像を使っちゃえばいいんじゃないか!?というものです。

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

DEMO

See the Pen QWyeMyW by cha1ra (@cha1ra) on CodePen.


みなさんも使ってみてください♪

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です