相談：image/next により生じる画像高さの余白

[herohoro]

困っていること

記事内(image block)にその都度サイズが異なり予めサイズを統一できない画像(スクショ)を埋め込むと横長・縦長の画像に異様な余白が生じてしまいます。

やったこと

• 高さの値を修正し、横長・縦長画像の表示のされ方を見ながら丁度いい値は無いか調べました。
  👉 「どっちを取るか」の判断となり縦長画像を見やすく高さを設定すれば横長画像は上下余白が大きくなり画像として見にくくなってしまっています。。。。

詳細：herohoro/issues/5

• 直接importすれば画像サイズを指定しなくていい・・といった記事を見つけ検討してみました。
  👉 publicフォルダに収納する画像ではないので意味が違うなと思い八方塞がりになりました。

まとめ

予め画像のサイズを指定するのは難しい場合に読者の見やすい画像設定をする方法はありませんか？？？

[otoyo]

画像の領域を指定しても縦長、横長の両方に対応することはできず、余白ができてしまったり変に拡大されてしまうのは自分も何とかしたいと思っていたところなので、サイズを取得する方向で解決策を考えてみます。

[herohoro]

ありがとうございます😭

[otoyo]

#50 で画像本来のサイズで表示するようにしました。
スクリーンショットや小さめの画像では余白が無くなって違和感なく表示できる反面、写真のようにもともと大きい画像はかなり大きく表示されてしまいます。しかしこれは img タグでもそうなのでご了承いただければと思います。

[herohoro]

さっそく同期させていただきましたm(_ _)m
確認すると・・・
▼ 　横長

▼　縦長

すごいです＼(^o^)／
そして早い！！！
これでサムネ部分もimage/nextの方で修正できそうです！！！！
ありがとうございます(´ω`)⭐

[otoyo]

確認ありがとうございました。