[過去ﾛｸﾞ] HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (1002ﾚｽ)
上下前次1-新
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
753: 2024/11/06(水)12:24 ID:??? AAS
>>752
ごめん、なんか歪んでるよね。
もし可能なら、元画像のアスペクト比を保ったままが理想です。
754: 2024/11/06(水)15:10 ID:??? AAS
画像サイズが決まってるなら、calcで計算するとかすれば行けるんだがなぁ
755(2): 2024/11/06(水)16:05 ID:??? AAS
position: absolute; の使いかたちょっと言い間違えたごめん
これはどう？
外部ﾘﾝｸ:jsfiddle.net
756(2): 2024/11/06(水)17:09 ID:??? AAS
>>755
ありがとう。 だが実に惜しい、、
#oyaにボーダー付けてみるとわかるけど全幅になってないんだよな〜。それ以外はバッチリなのに、、
外部ﾘﾝｸ:jsfiddle.net
757(1): 2024/11/06(水)17:16 ID:??? AAS
>>756
どういう状況で必要な仕様なのか想像つかない…
flexを1 0 auto にしてみたらどうかな？
758(1): 2024/11/06(水)17:44 ID:??? AAS
>>757
ありがとう。ただ、flexを1 0 auto にすると2番目の画像が親要素（黒いボーダー）の外に出てしまう様子。
#oyaのサイズが大きいと余白ができてより崩れてるのがわかりやすいかも
外部ﾘﾝｸ:jsfiddle.net
用途としては、縦横バラバラの画像（20個全部バラバラ）を2つづつ横並びで高さを揃えて並べていく
その際、それぞれの画像に合わせて数値や比率をいちいちクラス作って画像毎に書きたくないので
汎用CSS1つで全部に対応させるようにしたい って感じです
js使わないと無理かもですねぇ
759(1): 2024/11/06(水)18:09 ID:??? AAS
縦長の画像は上下が切れてもいいの？こんなふうに
外部ﾘﾝｸ:jsfiddle.net
切り取り位置はobject-positionで
760(1): 2024/11/06(水)18:23 ID:??? AAS
>いちいちクラス作って画像毎に書きたくないので
なんで嫌なのか理解しかねるがまずはそれで実装しなさい
その上で試行錯誤で改良していけば良い
761(1): 2024/11/06(水)18:36 ID:??? AAS
>>759
切れてはダメです。その代わり横幅はバラバラでもOKです。
>>760
例えば世の中にあるバナー（縦長、横長、正方形、長方形）を全てコレクションしていくサイトを依頼されたとする
その後に画像100個、200個、3000個と増える可能性を前提に考えておくべきかと。
3000個分の画像サイズ測ってクラス全部書いてくのはもちろん非現実的だし、20個のクラスを書いてくってだけでも個人的には汎用化を即検討すべきってレベル。
jsは検討すれど全部クラス書いてくのはさすがにメンテや可読性の面でも非効率すぎかと
762(1): 2024/11/06(水)18:38 ID:??? AAS
なんにせよ変なことせず素直にgridで並べればいいような気がするけど
763: 761 2024/11/06(水)18:40 ID:??? AAS
WordPressとかCMSやってる人なら常に基本は汎用化をベースに考えるはず。
あらゆる箇所においても。
764: 2024/11/06(水)18:43 ID:??? AAS
>>762
>>745を実現できるならgridでもおｋです
765(4): 2024/11/06(水)18:57 ID:??? AAS
他の人が言ってるのは使いまわしのきく仕様に見えないってことだと思うよお
サイズの違う画像をきれいに並べるやり方はいろいろあるからググってみて
よくあるのはこんな感じ
外部ﾘﾝｸ[html]:coliss.com
CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック
766: 2024/11/06(水)19:18 ID:??? AAS
>>765
ありがとう。でもそゆことじゃないんだわな〜ｗ
用途はあくまで例であり、ここへはＣＳＳの質問しに来ただけであって
私はむしろデザインの方が得意なのでレイアウトとかデザイン変えるとかそういう問題なら2秒で解決です。
767: 761,766 2024/11/06(水)19:21 ID:??? AAS
>>765
気持ちはありがたいです。とても親切な回答だと思います。
初心者ならそういう回答の方が良いこともあるかもしれないし。
お騒がせしました
768(1): 2024/11/06(水)19:24 ID:??? AAS
>>756
>#oyaにボーダー付けてみるとわかるけど全幅になってないんだよな～
#oyaがwidth:600pxでそれにborder: solid 1pxを指定なら#oya側の600ｐｘの方へボーダー表示になるのは道理では？
769: 2024/11/06(水)19:29 ID:??? AAS
>>768
そうだね。relativeは#oyaではないからね。
ということで、惜しいけどダメですね。でも案をくれて有難かったです。
770(1): 2024/11/06(水)19:32 ID:??? AAS
なんだまた釣りか
771: 2024/11/06(水)19:37 ID:??? AAS
>>765
そういう風に選択肢をたくさん知って勉強しとけば引き出しも増えるからね
依頼される用途を想定と言ってもコレクションサイトに画像3000個とかさぞかし見にくいサイトだろうなｗ
772(1): 2024/11/06(水)19:48 ID:??? AAS
てか、普通にロゴとかなら>>765みたいになる、というかそれしかないと思う。
でも例えば、ロゴではなく、縦長（例700×100）のバナーを設置したらそのデザインだと上下の余白なくて左右だけ余白やたらできて横長のバナーが隣接したら見苦しいだろうね。
上下前次1-新書関写板覧索設栞歴
あと 230 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.015s