Q&A
「div内いっぱいに拡大縮小させたい」とのことですが、そのdivのサイズは何を基準にするのですか？ 3等分ですか？
一つのdivの中に３つの画像を横並びにflexboxで作成しています。
ページの拡大に合わせて画像の比率を変えずにdiv内いっぱいに拡大縮小させたいです。
※divのheightは拡大に伴い変動しても良いです
/HTML/
<div class=section1> section1 </div> <div class="images"> <div class="imagepic left"><img src="images/insideimage_left.jpg" alt="insideimage"></div> <div class="imagepic center"><img src="images/insideimage_center.jpg" alt="insideimage"></div> <div class="imagepic right"><img src="images/insideimage_right.jpg" alt="indideimage"></div> </div> <footer> footer </footer>/CSS/
.section1{
background: blue;
height: 100px;
}
.images {
background: crimson;
display: flex;
justify-content: space-between;
}
.imagepic img {
max-width: 100%;
height: auto;
}
footer {
background: rgb(106, 99, 154);
height: 100px;
回答1件
0
ベストアンサー
align-items: flex-startとすることによって、交差軸方向のサイズ（高さ）がコンテンツ依存になります。
css
1.images { 2 background: crimson; 3 display: flex; 4 width: 1000px; 5 /* justify-content: space-between; */ 6 align-items: flex-start; 7} 8 9.imagepic img { 10 /* max-width: 100%; */ 11 height: auto; 12 display: block; 13} 14 15.left img { 16 width: 399px; 17} 18.center img { 19 width: 245px; 20} 21.right img { 22 width: 356px; 23}
投稿2021/02/25 08:13
総合スコア36928
ご回答、記述ありがとうございます。
widthが1000以上になった時にdivごと余白が出ないよう縦横拡大するにはどうすれば良いでしょうか？
その場合、画像のサイズはどうなりますか？
画像もdivに合わせて一緒に拡大したいですが不可能でしょうか？
.images {
background: crimson;
display: flex;
align-items: flex-start;
}
.imagepic {
flex-grow: 1;
}
.imagepic img {
width: 100%; height: auto;
display: block;
}
教えていただいた物を参考に自分のイメージに近いところまでもってきたのですが
↑だと広げたときに1000以上になると真ん中の写真が飛び出てしまうので両サイドの写真の下に余白が生まれてしまいます。
この余白が出ないようにしたいです。
すみません言葉足らずで、、、
「↑だと広げたときに1000以上になると真ん中の写真が飛び出てしまう」という問題が確認できませんでした。
おそらく、画像サイズに依存する問題だと思いますので、3枚の画像のサイズを教えてください。
お返事ありがとうございます。
left399×300px
center245×300px
right356×300px
親要素は1000×300pxです。
.left{
flex-grow: 399;
}
.center{
flex-grow: 245;
}
.right{
flex-grow: 356;
}
としてはどうでしょうか。
ご回答ありがとうございます。
試したところ、ちゃんと全部きれいに拡大できるようになりました！！
とても助かりました。ありがとうございます！
あなたの回答
tips
プレビュー
