記事一覧とか商品画像一覧とか用に。
今のところ個人的最適解。
用途・活用シーン
商品画像とかアイキャッチ画像は寸法に規則性を持たせたいんだけど、納品してみたら好き勝手にいろんなもんをアップしやがってくれるおかげでデザインが崩れてえらいこっちゃ、みたいなことは珍しくない。泣きつく勢いでお願いしても言うことを聞いてくれるわけないのが現実。じゃあ、どんな感じのを使ってきても対応できるようにしようぜっていう考え。
WPならアップ時にトリミングするおまじないがあるんだけどね、できない環境もあるからね、自前の手段を持ちたいですね。
こうやる
コピペしてhtmlで保存して開いてブラウザ幅を変えたりしてみるとよろし。
見返したら余計なもんが入ってる気がするけどなんかもうめんどい。
<style>
ul{
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
}
ul li{
flex: 1;
}
ul li .img{
width: 100%;
padding-top: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
ul li .img img{
width: 100%;
height: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
ul li .img.yoko img{
width: auto;
height: 100%;
}
</style>
<ul>
<li><div class="img"><img src="https://placehold.jp/600x600.png" alt=""></div></li>
<li><div class="img"><img src="https://placehold.jp/400x600.png" alt=""></div></li>
<li><div class="img yoko"><img src="https://placehold.jp/600x300.png" alt=""></div></li>
<li><div class="img"><img src="https://placehold.jp/600x1800.png" alt=""></div></li>
</ul>.imgについて
実数値を使用せずに正方形を作るにあたって、.imgの高さをpadding-topで指定してるのがポイント。widthが基準になってるから100％にしたら正方形になるっていう。で、正方形になったけど入れ子として機能しないからpositionで乗っける。overflowではみ出した部分を削る。
.img imgについて
positionとtransformの複合で、親（.img）の中央を基準に配置。
サイズに関しては、これはもう仕方ないんだけど、縦長と横長でclassを振り分けてそれぞれ余白がないようにする。動的な処理が必要だからjsによるclass付与が妥当なところか。
まあでも余白が出るほど極端な横長の画像はめったに無いからwidth:100%;の方だけで作っちゃって、仕様ですと言い切っても良いかもしれない。
ちょっと乱暴だけどね。
.yokoについて
基本的に画像を扱う上で一番厄介な存在は正方形～横長に紛れた縦長。ほんとに邪魔くさい。まあ、入れ子形式にしてあるんなら縦と横のcssを入れ替えたら済むんだけどね、そこの判定がホントだるいね。
ささやかな悪意
枠よりも大きい画像を使ったら縮小したりはみ出た部分を非表示にする、そういうのは当たり前感がある。それと合わせて枠よりも小さい画像を使用した場合、強制的に引き伸ばすように作ってある。
こればっかりは譲れないというか、意外と、縮小と同じく拡大もできるんじゃねみたいな考えの人が多いんで正していきたいみたいな、餅は餅屋ではあるんだけど分からんのを分からんままでやられるのは自分のことなのにそんなんでええんかっていう、警鐘を鳴らしたい気持ちというか、言わなくても分かれみたいな、そんなやつ。
別の手段
画像を背景として指定するって方法もあるんだけどね。
そうしたほうが手間も少ないんだけど、htmlだけで見たときに画像が無いってのはあまり好ましくない気がする。
コメント