CSSで便利なものが今まで気づかずにいたので忘れずに今のうちに記録です。
imgタグはデータの大きさを調整すると、デフォルトは上揃いになっており、囲む横縦の幅が決まっていると、画像データを調整するか、backgroundにしてトリミングしたかのように見せるかの方法でした。
不揃いの画像サイズが数枚ある場合、ブロック要素でサイズを固定し、インラインCSSでbackgroundを入れ、urlでパスを指定し、coverで調整すると便利だと思いますが、これだとデータがないと見なされるんですよね。
出来ればちゃんとaltやtitleも入れてデータとして表示させたいので、画像を調整するしかないのかと思ってました。
しかし、調べると便利なCSSがあるんですね。
それは、object-fitというものでした。親要素のサイズを基準にし、子要素にobject-fit: coverとすると、backgroundのsizeのような挙動をしてくれます。
親要素がoverflow:hiddenで飛び出てる部分を隠すかのような見え方になっています。でも、ちゃんとimg要素はあり、altやtitleでデータがあるとしています。これは知りませんでした。
このおかげでサイズが不揃いの画像ファイルを登録し、取り出したあとサムネイル形式に表示する場合、backgroundでなくimgタグで表示することが楽になりました。
他にはcontainやfillなど設定値があるので便利です。
a {
display: inline-block;
height: 250px;
width: 250px;
}
a img {
width: 100%;
height: 100%;
object-fit: cover;
}
上記は縦横250pxのボックス内に画像を中央揃えに引き延ばし、はみ出る部分は隠れる形で表示してくれます。