herohoroブログ

親要素を無視するimgのサイズを制御する



🔄   2022-08-02

画像が多い私のブログは以前Vercelにブロックされたことがあります😱

原因は....

ローカル保存せずに何度も読み込んでいたから......😱

そこでアルパカ先生が保存できるように改造してくださったのですが......

画像が読み込まれない場合はページを更新してみてください。

https://github.com/herohoro/easy-notion-blog-02/pull/13

😨
親要素からはみ出してしまうケースがある!?

ってことで今日ははみ出さないように調整して表示させていく過程を紹介します\(^o^)/

参考になった記事

試行錯誤の過程がとても参考になりました。

アスペクト比

アスペクト比4:3の要素の横幅に対して高さが75%、ということになります。
😮
なぞの75%は割り算していたのか....。ってことは9:16の画像は0.5625ってことか......

今回私のブログでいつも作っているサイズを確認してみると......

画像が読み込まれない場合はページを更新してみてください。

11.06 : 21.17らしい.....。

11.06÷21.17=0.5224.....で考えれば良さそう\(^o^)/

アスペクト比を使って高さと幅を設定

画面の横幅を基準とする単位があるじゃないですか…vw

.box {
  background: teal;
  width: 50vw;
  height: calc(50vw * 0.75);
  
  p {
    color: white;
  }
}
[css]アスペクト比を固定して可変させる方法 ~よく見る75%ってなに!?

参考記事では50%の幅にするために50vwにして設定していましたが、

画面幅の50%を全て目的の画像を表示させる.....

っていうのはあんまりないのかなと思い、

試してみると案の定こうなりました😅

画像が読み込まれない場合はページを更新してみてください。

実装

3つのサイズでレイアウトを設定しているeasy-notion-blog。

それに合わせてサムネイルのサイズを調整していくことにしました。

大きいサイズ:1024px以上

❤️
23vwが丁度よい\(^o^)/
@media (min-width: 1024px) {
	.thumbnail {
    width: 23vw;
    height: calc(23vw * 0.53);
    margin: 10px 0 10px 0;
  }
  .thumbnail img{
    width: 23vw;
    height: calc(23vw * 0.53);
  }
}
src/styles/blog-parts.module.css

画像が読み込まれない場合はページを更新してみてください。

中間サイズ:600px以降、1024px未満

❤️
35vwが丁度よい\(^o^)/
.thumbnail {
  width: 35vw;
  height: calc(35vw * 0.53);
  margin: 10px 0 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border: none !important;
  border-radius: 10px !important;
}
.thumbnail img{
  width: 35vw;
  height: calc(35vw * 0.53);
}
src/styles/blog-parts.module.css

画像が読み込まれない場合はページを更新してみてください。

小さいサイズ:600px以下

❤️
75vwが丁度よい\(^o^)/
@media (max-width: 600px) {
	.thumbnail {
    width: 75vw;
    height: calc(75vw * 0.53);
    margin: 10px 0 10px 0;
  }
  .thumbnail img{
    width: 75vw;
    height: calc(75vw * 0.53);
  }
src/styles/blog-parts.module.css
画像が読み込まれない場合はページを更新してみてください。

まとめ

画面幅を基準にするvw

vwを使えば高さも設定でき

アスペクト比の値を求めることで比率を安定させる

なんて素晴らしい単位!!!!

今まで% を使うしか脳になかったので、

「高さを設定するにはどうすればいいのだろう....?」

とずっとモヤモヤしていました。

vw を使えれば怖いもの無しですねーーーー\(^o^)/

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/