Scribble at 2021-02-04 21:30:43 Last modified: 2021-02-04 21:36:44

PHILSCI.INFO のリニューアル（MD と似たような体裁にしてる）で、ロゴを SVG で出力して使っているのだが、どうも width: 14rem; height: auto; で縮小すると上下が切れてしまう。調べてみると "object-fit: contain;" が解決になるようだが、いまのところ Edge では無効だ。なんと workaroud として、<img/> 要素に "display: table-cell;" を指定するのがいいという。うーん。ちょっと対処療法的でしかない。

そして、Edge (Chromium) と Firefox (Quantum) とで比べると、Firefox の方が高さの計算として数ピクセルほど大きな値を親の <p/> 要素に指定している。このため、画像が少しだけ Edge とは異なる位置に表示されるので、これは親の line-height を変更しなくてはいけない。