Scribble at 2024-04-01 09:52:47 Last modified: 2024-04-01 09:57:07

画像の上半分くらいだけトリミングして中央に表示しようとしている。最近では object-fit というプロパティがあるらしく、これを cover や contain にすればトリミングされるというのだが、どちらで指定してもぜんぜん画像がトリミングできていない。Edge は未対応なんだろうか。こういう、直感的にコードを書いて期待通りに動かない場合は、なんだかんだと下らないバッド・ノウハウを調べる羽目になることが多いというのが、25年ほどウェブで仕事をしてきた人間の経験則である。こういう場合に取るべき対策は、「そういう不安定で期待どおりの挙動をしないプロパティは使わない」ということに尽きる。

もちろん、不安定な機能を使わない方がいいという理由の他にも、同じことは別のやり方でやれるという理由もある。この場合だと、トリミングしたのと同じ結果になるような比率で空っぽのブロック要素をつくり、そのブロック要素の背景に画像を指定して位置を調整すればいい。もちろん原理主義者によれば、そういう用途で空っぽ、もしくは   しか入れていないブロック要素をプレゼンテーション目的だけのために組み込むのは、文書構造に視覚的な「意味」を持ち込む越権行為や混乱であろう。ただ、僕は大学院で論理学も専攻していたので、そのへんの二束三文のデザイナーやコーダとは違って混乱などしてない。企業人としてわざとやっているのだ。