ホームページを自分でつくる分には、あまり意識する必要はないのですが、お客様がご自身で更新する仕様の場合、できるだけ簡単に操作していただく方が良いわけで、画像の表示には、少々、神経を使います。
というのも、ご用意いただく写真は縦長だったり横長だったり、大きさも色々で、揃えてからアップいただくのが大変ですから、どのようなサイズでも綺麗に表示するために。
最近は、そのような使用方法に合ったCSS(object-fit-images/WEBのデザイン情報)があって助かります。ところが昨晩IE(Internet Explorer)で見たら、表示が崩れていてガッカリしてしまって。間もなくサポート期間も終わりますが、まだ使っている方もいらっしゃるでしょうから、できる範囲で対応したいなと。
で、今ほど思いつく解決策をいくつか試してみたところ「object-fit-images.js」というスクリプトが上手いこと効いてくれました。似たようなスクリプトに「fitie.js」もありますが、残念ながら私の場合は効きませんでした。レスポンシブ仕様(PCスマホ兼用のデザイン)で高さにvwを使っていると相性が悪いようです。
ちなみに
こちらを参考にさせていただきました。このように、操作しやすさにも配慮しながらつくっているわけですが、そうすると時間が掛かってしまうのですね、フーーー。折り合いをつけながらやるとします。