日記、webデザイン、読書、写真など。SANOGRAPHIX京都を拠点に活動する佐野章核の個人ブログ。縦横比が入り乱れてる書影のレイアウト2018-06-07縦横比が入り乱れてる書影のレイアウトWebデザイン自分のサイトのトップページで、今まで作った同人誌の書影を表示している。これらの書影は縦横比が一定でなく、縦長・横長のものが入り混じっているから、等間隔に並べてもイマイチ揃っているように見えず頭を悩ませていた。正方形にトリミングするiOSの写真アプリがこれ横位置の画像を90度回転する以前自サイトでやっていたけど変だし首が疲れるなどがある。大げさな実装にしたくないし、書影をトリミングしたり回転するのもおかしい。いうことで、自分のサイトではこのような表示にした。ここから実物を見られる。画像の長辺サイズを指定する。したうえで、画像を左右垂直中央に配置されるようにする。最後に背景色や書影のシャドウ(書影だけに)を足してやれば完成。書影ってただ置くだけだとイマイチで、ある程度のマージンを設けるとより本らしく見える。そのマージンにグレーの背景色を設けることで正方形のシルエットを保ちつついろんな縦横比の画像を配置できるようにした。ちなみにIE11で見たら横位置の書影が怪しい表示になっていた。致命的じゃないので放置している...。14:00縦横比が入り乱れてる書影のレイアウト関連記事2019-02-24サイトの画像をWebPに変えるとどうなるか実験した今更WebPを使ってみたくなって実力を検証した。4というものを作った。(sanographix)グラフィックデザイナー。日記SMTP++というイベントを開催している。今週末(2/7)に9度目を迎える。いう趣旨のイベントかは以前記事にした。このイベントの持ち味は準備が超省エネなことだ。ヤマハのサウンドバー『YAS-209』を買った。売れ筋モデルのYASシリーズのサブウーファー「ある」ほう。普段着にゲームTを着る活動をしている。キーボード買った感想。コンパクトでかわいい。Offer既刊まとめて25%オフ所属サークルの同人誌5冊をセットにした、お得なバンドル。プライバシーポリシースターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。