CSS WEB関係

【CSS】画像を親要素内からはみ出さずに合わせて表示する<object-fit>

投稿日:

サイト作っている時にHTMLでデザインした親要素から画像がはみ出してしまう問題を解決したので備忘録。

サイトの親要素から画像がはみ出る

css_object-fit

はじめに親要素として、200×200サイズの枠を作ります。この枠に「267×400」と「400×267」の画像を入れていきます。するとこうなります。

css_object-fit_2

デベロッパーツールで確認してもしっかり親要素のサイズ(200×200)は反映されています。なのでこの親要素に子要素である画像(img)をリサイズする必要があります。

css_object-fit_3

親要素から画像がはみ出ないように色々試してみる

さて、さっそく画像を枠(親要素)からはみ出ないようにしていきましょう。親要素側の設定は出来ているので、子要素である「img」(画像)のCSSをいじってみます。

横幅・縦幅を変更

枠側の幅に合わせる為に、imgの横幅を100%にしてみます。(width: 100%;)すると、横幅はぴったりになりますが、縦幅に色々と問題がありますね。

css_object-fit_4

縦幅を最大にしても横幅にもスペースが出てきます。(height: 100%;)

css_object-fit_5

これだとせっかく親要素の枠を作ったのに残念すぎますね。それでは、私なりの解決方法をみていきます。

親要素から画像がはみ出ないようにするには?:結論

画像を親要素内からはみ出さずに合わせて表示する方法の結論ですが、

object-fit: cover;

を使っていくことでしっくりしました。

今回は作成した親要素(200×200)にはみ出さず(めいいっぱい)表示したいので、親要素の中の横幅・縦幅を最大指定していきます。

See the Pen
JjXyowo
by 薪 (@makimaki_a222)
on CodePen.

imgを下記のように指定していきます。

.img {
margin: 3px 90px;
width: 200px; ←枠の横幅の大きさ
height: 200px; ←枠の縦幅の大きさ
}

.img img {
width: 100%; ←親要素でしている横幅200pxに対して100%
height: 100%; ←親要素でしている縦幅200pxに対して100%
object-fit: cover;
}

object-fitの種類

object-fit:プロバティにはいくつかの種類があるので一部みていきましょう。

object-fit: cover;

object-fit:cover は、指定したサイズに合わせてトリミングをしてくれるものです。今回は親要素でサイズを指定していたのでそのサイズにしっかりトリミングをしてくれました。

css_object-fit_6

object-fit: contain;

ちなみにobject-fit: contain;では、指定された枠に全体を表示させるようにするので下記のようになります。

css_object-fit_7

object-fit: fill;

object-fit: fill;は、画像の縦横の比率をリサイズせず全体を表示させます。

css_object-fit_8

まとめ

これ一個覚えれば、画像キレイにならべる事が出来て見栄え良くなりそう。

スポンサーリンク




スポンサーリンク




-CSS, WEB関係
-,

執筆者:


comment

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

関連記事

illustrator_flower

【イラレ】Illustratorで簡単な花びらを作るには?<作り方・イラスト>

今回はこんな感じの簡単なお花の作り方の備忘録。 ※Illustrator 25.1使用 Contents1 イラレの簡単な花の作り方流れ2 イラレ(Illustrator)簡単花作方法:多角形作成3 …

divタグの囲み枠をテキスト(文字)の幅に調節して修飾させる方法

サイトの修飾ってとても好き。けどなかなかうまく行かなくてイライラ☆ タイトルとかに色をつけたくてdivタグにカラーとか枠指定をすると、画面横いっぱいに色が広がってしまいますよね。 今回はちょうど修飾幅 …

ads-txt_6

【グーグルアドセンス】ads.txtファイルとは?WordPressでの設置方法

サイトを作成してしばらくしてGoogle AdSenseを確認したところ、「要注意 – 収益に重大な影響が出ないよう、ads.txt ファイルの問題を修正してください。」と表示されていまし …

Illustrator_Characterdirection (5)

【Illustrator】イラレ作成済みの文字の方向を変えたい(一部・数字)

Illustratorで文字入力後、デザインの関係上、横並びを横並びにするときって多々ありますよね。 そして発生する問題。 数字だけがおかしくなっている。 ので今回はIllustrator(イラレ)作 …

circle_gizagiza (2)

【Illustrator】イラレで丸(円)をギザギザ・なみなみな感じにする方法

今回はIllustrator(イラレ)で円をギザギザ(ラフ)な感じにしていきたいと思います。 Contents1 イラレで丸(円)をギザギザ・ラフ(なみなみ)にした完成図2 作り方3 1:円を作成する …

背景画像

プロフィール画像

あさの まき

WEB関連の仕事をしている旅行と酒を愛してやまない女。 いい大人の雑記。

ツイッター

SPONSORED LINK