
新しく作成したHomePageで長崎に行った時のまとめページを作ったときに、複数の写真をきれいに並べるのに苦労した点をメモとして残しておきたいと思います。
写真は向きが縦であったり、横であったりなどで、単純に幅や高さを指定しても、画像の右文書の開始位置が微妙に変わり、きれいにレイアウトできませんでした。幅と高さを固定して、縦横の比率を変えることなくその中に写真が入るようリサイズしてくれるものがないか探しました。
やっぱりあるものですね・・・・・
IE、Edgeでなければ、スタイルシートだけで実現できるようですが、Edgeを無視するわけにはいかないので、GitHubのobject-fit-imagesを使用したら簡単にできました。
設定の際は、クリエイターボックスさんのサイトに掲載された下記のURLの記事を参考にさせていただきました。
https://www.webcreatorbox.com/tech/object-fit
【HTMLテクニック】【Coolなツール類】
写真は向きが縦であったり、横であったりなどで、単純に幅や高さを指定しても、画像の右文書の開始位置が微妙に変わり、きれいにレイアウトできませんでした。幅と高さを固定して、縦横の比率を変えることなくその中に写真が入るようリサイズしてくれるものがないか探しました。
やっぱりあるものですね・・・・・
IE、Edgeでなければ、スタイルシートだけで実現できるようですが、Edgeを無視するわけにはいかないので、GitHubのobject-fit-imagesを使用したら簡単にできました。
設定の際は、クリエイターボックスさんのサイトに掲載された下記のURLの記事を参考にさせていただきました。
https://www.webcreatorbox.com/tech/object-fit
【HTMLテクニック】【Coolなツール類】

| ホーム |