ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・
- 枠自体は高さも幅も決める(li要素のwidth,heightは決める)
- 基本は画像要素を中央揃え(positionの50%ぞろえとtransform-50%で中央ぞろえ)
- 高さに揃える(max-height:100%)
- 縦横比は絶対遵守(height:auto;width:auto)
- 縮小はしても拡大はしない
- 当然枠は超えない(li要素のoverflow:hidden)
HTML
|
1 2 3 4 5 6 |
<ul id="image_block_area"> <li class="image_block"> <!--ループで繰り返し--> <img src="./image_for_slide/画像パス" alt="桜井" class="img_elem"> </li> </ul> |
CSS(ソースにあるアニメーション要素は排除)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.image_block{ display: inline-block; width: 320px; height: 400px; margin-right: 15px; overflow: hidden; background: #eee; position: relative; } .image_block:nth-child(3n){ margin-right: 0; } .img_elem{ position: absolute; top:50%; left:50%; max-height: 100%; height: auto; width: auto; transform: translate(-50%,-50%); } |
ソース
https://github.com/umanari145/css/blob/master/original_pararax.php
