object-fit coverって便利だなーなんて思っていたらIEダメなんですね。
ってことで、どうすりゃ良いのか調べていたら”jQuery”を使ったりするものなど、いろいろ出てきました。
ただ、なるべくシンプルにしたいので、さらに調べながらテストをしていたら、以下のように実現できました。
Wordpressのギャラリーは親子のブロック要素”transform”で移動、移動としてますが、上記のコードは1つのブロック要素で完結できています。
なかなかシンプルで良いのではないでしょうか。
当初、Wordpressのカスタマイズ最中に凄くメンドクサイ事をやっておりましたが･･･
画像サイズを取得し、予定のブロックサイズに縮小した際、縦横どちらを起点にするか調べ、
それに合わせて縮小したサイズからはみ出るサイズを２で割り、CSSのabsoluteで移動させて中央に持ってくるなんていう･･･
まぁ、でも自分で考えるというのは良いことですよね･･･？笑
下記コードも、画像のサイズがバラバラの場合、縦横の起点をどうしても調べないとダメになります。
起点になる部分に応じて、
max-height: 100%;
max-width: 100%;
どちらかを適用する必要があります。
Wordpressで画像サイズを取得するコードを書くと以下のようになります。
$wp_img = wp_get_attachment_image_src($id, 'large'); $src = $wp_img[0]; $width = $wp_img[1]; $height = $wp_img[2];
$idは画像のIDです。