ホーリーのプログラミング日記

ホーリーのプログラミング日記

エキセントリック・スーパーアプリクリエイター。プログラミング歴4年。独学。リリース本数:約30本。総ダウンロード数:25万

おらに元気を

 

いやー、CSSにハマりました。

画像を正方形に表示させるっていうだけのことに、3時間以上かかりましたよw

 

f:id:gevvoihorry:20190620050141p:plain
 

この左側のアイコンなんですけど、これを画像のサイズ関係なしに正方形に表示させたかったんです。

元の画像が長方形だった場合は、はみ出る部分をカットする形で。

 

それが上手く出来なくて、俄然ハマりました。

レスポンシブにするっていうか、横幅を%で指定した際に、どうやって正方形を作るのかが分からなかったんですよね。

 

まあ終わってしまえば簡単な話だったんですが、久しぶりに苦戦しましたよ。

CSSってやつは、やっぱ難しいw

 

(ちなみに参考にさせていただいた記事はこちらです。最初からこれが手元にあったんですが、なぜだか3時間以上かかってしまったw)

CSSで画像を正方形にトリミングして縦横比を維持したまま可変してくれる方法 | RECOOORD

 

===

 

んで、あれこれ作ってて思ったんですが、この銭湯サイトの画像はどうすればいいんでしょうか?

各銭湯の写真を最低1枚は載せたいんですけど、それはあれですよね。「銭湯の許可を得てホームページにある写真を使わせていただく」ないし「自分で実際に撮りに行く」の2択しかないと思います。

自分で作ってて、この部分がノープランだったと気付きました。

 

しかし東京23区限定とか言え、銭湯の数は500を超えるわけですよ。

1軒1軒許可をもらうのも大変だし、そもそもホームページがないところも多いでしょう。

なので、この案は却下。

 

かと言って自分で直接撮りに行くのも、足が疲れるので却下。

これは即却下ですw

 

となれば、もうあれですよね。

 

ユーザーさんから直接もらうしかない

 

ユーザーさんに直接上げていただく形しかないかなと思っています。

 

正直な話をすれば、最初はグーグルのストリートビューを貼り付けようと思ってたんですよ。

「埋め込み」みたいなのを選択するとコードが出てくるじゃないですか。それをそのまま貼り付ける気でいました。

スクショして使うのはルール違反だけど、埋め込みは正規のやり方なので全然問題ないと思ってたんですよね。

 

でもこれは、まさにストリートビュー。

サイズもある程度の幅で固定されてるので、自分の思ったようには使えなかったわけです。

いい感じの画像っていうか、露骨にストリートビューになってしまうw

 

えー、そんなわけで画像どうしようかな?なんて悩みを持ってます。

現状は「オラに画像を分けてくれ」の元気玉スタイルですかね。

画像をアップ出来るようにして、ご協力をお願いするのが一番かなと思っています。