表示画像部分の、可変対応をしてみた。

こんにちは。
最初の仕様詰めが甘いと、色々やってくうちにあれ？あれあれ？
みたいな事がたくさん出てきて。

最近は、その対応に追われてる。
まあ、最初から全部考えつくとか無理だし、学んだ。

で、そこでやってる対応。

今回記事投稿がメインだから、投稿された画像が表示される部分があって。
もちろん全部がフロントの処理という訳ではないからまあ、参考程度に。
やりたい事としては、ユーザーさんがどんなサイズの画像を投稿してきても、 画像を当てはめたい場所にぴったり当てはめるってこと。

小さいサイズの時は、リサイズとかせずに表示場所の中心におく。
逆に大きすぎるときは横幅縮小して、縦幅は自動で。

そんなこんなで、ソースは下記です。 ちなみに、ダミー画像作成時はこちらを使用させていただきました。
今回始めて使った物なんだけど便利だよ。
ダミー画像作成参考サイト

See the Pen QbEbZg by megumin (@megumin23) on CodePen.

ちょー簡単だけど、本当可変は便利。