HTML/CSS のどんな質問にも優しく答えるｽﾚ 52 (850ﾚｽ)
上下前次1-新
745(5): 11/06(水)00:37 ID:l6mrxaRQ(1/2) AAS
縦横サイズがバラバラの2つの画像を横に並べる方法について質問です。
2つの画像において高さを小さい方に合わせアスペクト比を保ったまま横幅を自動調整（両画像の高さを揃え横幅は不揃いでOK）し、
かつ全幅（親要素 #oyaの幅に応じて画像が伸縮）にする方法わかる人いますか？CSSのみで実現が条件です。
下記ではheight: ****vh;箇所を調整しないと親要素を突き破ってしまうため、自動でリサイズされるようにしたいです。
.image-container {
width: 100%;
display: flex;
gap: 10px;
.image-wrapper {
flex: 0 0 auto;
省19
746: 745 11/06(水)00:55 ID:??? AAS
補足
cssは↓これでも>>745同様にできるけどこれもheight:の数値指定が必要
.image-wrapper {
display: inline-block;
margin-left:10px;
&:first-of-type{
margin-left:0;
}
height: 470px;/*←数値指定したくない*/
img {
省3
747(1): 11/06(水)01:12 ID:??? AAS
heightは記述したくないけど小さい方の画像の高さを取得して揃えたいってこと？
748(1): 11/06(水)01:18 ID:??? AAS
>>747
その通りです。
でもなんかこれで自己解決した臭い、、
.image-container{
width: 100%;
display: flex;
gap: 10px;
.image-wrapper {
&:last-of-type {
flex: 1;
省8
749: 745 11/06(水)01:30 ID:??? AAS
>>748
これダメでした。親要素の横幅が狭いと崩れる、、
750(1): 11/06(水)07:15 ID:??? AAS
試してないけどHTML書き換えていいなら
高いほうの画像のimage-wrapperを高さ0にするとか
position: absolute; か height: 0;
751: 745 11/06(水)08:46 ID:l6mrxaRQ(2/2) AAS
ソースをアップしました。
見た目こうしたい（その上で数値を指定したくない）
外部ﾘﾝｸ:jsfiddle.net
>>750さんの結果（ダメでした）
外部ﾘﾝｸ:jsfiddle.net
752(1): 11/06(水)12:06 ID:??? AAS
> 見た目こうしたい
アスペクト比はこれでいいの？
753: 11/06(水)12:24 ID:??? AAS
>>752
ごめん、なんか歪んでるよね。
もし可能なら、元画像のアスペクト比を保ったままが理想です。
754: 11/06(水)15:10 ID:??? AAS
画像サイズが決まってるなら、calcで計算するとかすれば行けるんだがなぁ
755(2): 11/06(水)16:05 ID:??? AAS
position: absolute; の使いかたちょっと言い間違えたごめん
これはどう？
外部ﾘﾝｸ:jsfiddle.net
756(2): 11/06(水)17:09 ID:??? AAS
>>755
ありがとう。 だが実に惜しい、、
#oyaにボーダー付けてみるとわかるけど全幅になってないんだよな〜。それ以外はバッチリなのに、、
外部ﾘﾝｸ:jsfiddle.net
757(1): 11/06(水)17:16 ID:??? AAS
>>756
どういう状況で必要な仕様なのか想像つかない…
flexを1 0 auto にしてみたらどうかな？
758(1): 11/06(水)17:44 ID:??? AAS
>>757
ありがとう。ただ、flexを1 0 auto にすると2番目の画像が親要素（黒いボーダー）の外に出てしまう様子。
#oyaのサイズが大きいと余白ができてより崩れてるのがわかりやすいかも
外部ﾘﾝｸ:jsfiddle.net
用途としては、縦横バラバラの画像（20個全部バラバラ）を2つづつ横並びで高さを揃えて並べていく
その際、それぞれの画像に合わせて数値や比率をいちいちクラス作って画像毎に書きたくないので
汎用CSS1つで全部に対応させるようにしたい って感じです
js使わないと無理かもですねぇ
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でもおｋです
上下前次1-新書関写板覧索設栞歴
あと 86 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.008s