◆当ページにはプロモーションが含まれています

HTML

【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.


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

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

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

@proglearn
一緒によく読まれている記事

【すぐ使える】ハンバーガーメニューボタンを作ってみよう!【HTML / CSS / JS 】|ProgLearn - プログラミング総合情報サイトプログラーン へ返信する コメントをキャンセル

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