種々の雑記

    

備忘

    
#CSS
画像投稿テスト。多分あんまり使わない予定だけど設定しておけば気が変わっても安心!
PCでもスマホでも2列でいい感じに表示させたい。
→css上だとimgで制御。実際のcssは以下。marginとかは好みなので省略。max系も好みだけど、画像の出力サイズの限界を定めるのでマスト(多分)なので値の方は任意の値と表記。ぼちぼち微調整してこ。

img{
 object-fit: cover;
 aspect-ratio: 1 / 1;
 max-height: (任意の値);
 max-width: (任意の値);
}

maxが描画範囲。
maxのこと、よくわからなくなったので後で調べ直す(2025/8/22)
→maxは最大出力範囲のこと。ここで指定した最大値を超えたときに初めて幅を縮めるとかの調整してくれる。(2025/8/22)

object-fitがmaxの描画範囲に画像をどう表示するかの制御。例えば描画範囲に縦横比無視で無理やり詰めるか、画像サイズは変えずに描画範囲に入れて余ったら余白を出すか、縦横比は変えずに描画範囲いっぱいに出して余分な部分はトリミングするかなど。
aspect-ratioが出力する縦横比の指定。今回は正方形でいいかな〜ってことで1/1。
クリックするとlightboxで本来の画像の縦横比でみょ〜んと出てくる。

imgタグはdisplayの初期値がinlineなので、displayに何も書かなくても勝手に横並びになれるときはなる。marginも効く。

現状中央揃えはしていないので若干ずれてるのと、maxがpx指定なのでデバイスの画面の大きさ次第では列が崩れたりバランス悪かったりする(いわゆるレスポンシブルではない)ので改良の余地あり。
タブレットは持ってないので確認できないのが難しい。
20250808025651-admin.jpeg 20250808025651-admin.png 202508080256511-admin.jpeg 202508080256512-admin.jpeg
« 前へ次へ »