HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (850ﾚｽ)
上下前次1-新
759(1): 11/06(水)18:09 ID:??? AAS
縦長の画像は上下が切れてもいいの？こんなふうに
外部ﾘﾝｸ:jsfiddle.net
切り取り位置はobject-positionで
760(1): 11/06(水)18:23 ID:??? AAS
>いちいちクラス作って画像毎に書きたくないので
なんで嫌なのか理解しかねるがまずはそれで実装しなさい
その上で試行錯誤で改良していけば良い
761(1): 11/06(水)18:36 ID:??? AAS
>>759
切れてはダメです。その代わり横幅はバラバラでもOKです。
>>760
例えば世の中にあるバナー（縦長、横長、正方形、長方形）を全てコレクションしていくサイトを依頼されたとする
その後に画像100個、200個、3000個と増える可能性を前提に考えておくべきかと。
3000個分の画像サイズ測ってクラス全部書いてくのはもちろん非現実的だし、20個のクラスを書いてくってだけでも個人的には汎用化を即検討すべきってレベル。
jsは検討すれど全部クラス書いてくのはさすがにメンテや可読性の面でも非効率すぎかと
762(1): 11/06(水)18:38 ID:??? AAS
なんにせよ変なことせず素直にgridで並べればいいような気がするけど
763: 761 11/06(水)18:40 ID:??? AAS
WordPressとかCMSやってる人なら常に基本は汎用化をベースに考えるはず。
あらゆる箇所においても。
764: 11/06(水)18:43 ID:??? AAS
>>762
>>745を実現できるならgridでもおｋです
765(4): 11/06(水)18:57 ID:??? AAS
他の人が言ってるのは使いまわしのきく仕様に見えないってことだと思うよお
サイズの違う画像をきれいに並べるやり方はいろいろあるからググってみて
よくあるのはこんな感じ
外部ﾘﾝｸ[html]:coliss.com
CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック
766: 11/06(水)19:18 ID:??? AAS
>>765
ありがとう。でもそゆことじゃないんだわな〜ｗ
用途はあくまで例であり、ここへはＣＳＳの質問しに来ただけであって
私はむしろデザインの方が得意なのでレイアウトとかデザイン変えるとかそういう問題なら2秒で解決です。
767: 761,766 11/06(水)19:21 ID:??? AAS
>>765
気持ちはありがたいです。とても親切な回答だと思います。
初心者ならそういう回答の方が良いこともあるかもしれないし。
お騒がせしました
768(1): 11/06(水)19:24 ID:??? AAS
>>756
>#oyaにボーダー付けてみるとわかるけど全幅になってないんだよな～
#oyaがwidth:600pxでそれにborder: solid 1pxを指定なら#oya側の600ｐｘの方へボーダー表示になるのは道理では？
769: 11/06(水)19:29 ID:??? AAS
>>768
そうだね。relativeは#oyaではないからね。
ということで、惜しいけどダメですね。でも案をくれて有難かったです。
770(1): 11/06(水)19:32 ID:??? AAS
なんだまた釣りか
771: 11/06(水)19:37 ID:??? AAS
>>765
そういう風に選択肢をたくさん知って勉強しとけば引き出しも増えるからね
依頼される用途を想定と言ってもコレクションサイトに画像3000個とかさぞかし見にくいサイトだろうなｗ
772(1): 11/06(水)19:48 ID:??? AAS
てか、普通にロゴとかなら>>765みたいになる、というかそれしかないと思う。
でも例えば、ロゴではなく、縦長（例700×100）のバナーを設置したらそのデザインだと上下の余白なくて左右だけ余白やたらできて横長のバナーが隣接したら見苦しいだろうね。
773(1): 11/06(水)19:52 ID:??? AAS
>>770
ここそればっかだよな
人に親切にすると仇で返される
774(1): 745 11/06(水)19:57 ID:??? AAS
今回のベストアンサーは>>755さんとさせてください。(ややこしい内容を一発理解でき、かつ独自案を出せたという事で)
CSSの仕様でわかったこと
?2つの画像は親要素サイズに応じた横幅を伸縮できる （アスペクト比を保ったまま）
?2つの画像は小さい方の高さに合わせて伸縮できる
?と?は同時にはできない
あざっした
775(2): 11/06(水)19:58 ID:??? AAS
>>772
そんな極端なサイズが入り混じる画像をどうしても一覧に並べないといけないなら
正方形とかでサイズ揃えて切り取るかな
グリッドレイアウトでobject-fit使って
776: 11/06(水)20:01 ID:??? AAS
>>775
ロゴもだけど、隅から隅まで計算されてデザインされたものを部分的に勝手に切り取るのはナンセンスだよ
風景写真ならいいけどね
777: 11/06(水)20:08 ID:??? AAS
>>773
ちゃんとお礼は言ったはずだけどねぇ・・・
まあ自分なら技術の質問に別の角度で回答するなら、まず「できない」という事を伝えて、その上でって事で言うかなあ
そうでないとまるでできないから、質問内容に逆切れしてるみたいだよ・・・
778: 11/06(水)20:08 ID:??? AAS
じゃあfloatでガタガタっと並べるのはどう！
上下前次1-新書関写板覧索設栞歴
あと 72 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.007s