FC2ブログ
HomePageで複数の写真を掲載する際の大きさの合わせ方
 新しく作成したHomePageで長崎に行った時のまとめページを作ったときに、複数の写真をきれいに並べるのに苦労した点をメモとして残しておきたいと思います。
 写真は向きが縦であったり、横であったりなどで、単純に幅や高さを指定しても、画像の右文書の開始位置が微妙に変わり、きれいにレイアウトできませんでした。幅と高さを固定して、縦横の比率を変えることなくその中に写真が入るようリサイズしてくれるものがないか探しました。

 やっぱりあるものですね・・・・・

 IE、Edgeでなければ、スタイルシートだけで実現できるようですが、Edgeを無視するわけにはいかないので、GitHubのobject-fit-imagesを使用したら簡単にできました。
 設定の際は、クリエイターボックスさんのサイトに掲載された下記のURLの記事を参考にさせていただきました。
 https://www.webcreatorbox.com/tech/object-fit

【HTMLテクニック】【Coolなツール類】

テーマ:ひとりごと - ジャンル:アフィリエイト

コメント
コメント
コメントの投稿
URL:
本文:
パスワード:
非公開コメント: 管理者にだけ表示を許可する
 
トラックバック
トラックバック URL
トラックバック
copyright © 2019 koblogx さんのブログ all rights reserved.
Powered by FC2ブログ.