Flexbox gallery

Question

There is a rubber gallery, the problem is that the width of each of its elements was defined as the initial width of the corresponding image. Accordingly, when the screen is reduced, the width of the element becomes larger than the width of the picture, and when it is reduced, the image does not fit in its container and shrinks in width.

It is necessary to make the height of the picture took all the space allocated to it in the container, and the width - scaled according to the proportions, stretching, respectively, the width of its parent container.

html, body { display: flex; flex-direction: column; height: 100%; width: 100%; align-items: center; justify-content: center; margin: 0; padding: 0; } .slider { display: flex; align-items: center; justify-content: flex-start; flex: 0 1 90%; width: 100%; white-space: nowrap; overflow-x: auto; } .image { flex: 0 1 auto; height: 100%; border: black 1px solid; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } .image-container { flex: 0 1 90%; height: 100%; display: flex; } img { max-height: 100%; flex: 0 1 0%; } .text { flex: 1 1 10%; display: block; background: chocolate; text-align: center; padding: 4px 10px; }

 <div class="slider"> <div class="image"> <div class="image-container"><img src="https://ru.fishki.net/picsw/012012/05/post/krasota/tn.jpg"></div> <div class="text"> <p>Text</p> </div> </div> <div class="image"> <div class="image-container"><img src="https://learn.javascript.ru/article/box-sizing/border-box@2x.png"></div> <div class="text"> <p>Text</p> </div> </div> <div class="image"> <div class="image-container"><img src="https://learn.javascript.ru/article/box-sizing/border-box@2x.png"></div> <div class="text"> <p>Text</p> </div> </div> <div class="image"> <div class="image-container"><img src="https://learn.javascript.ru/article/box-sizing/border-box@2x.png"></div> <div class="text"> <p>Text</p> </div> </div> <div class="image"> <div class="image-container"><img src="https://learn.javascript.ru/article/box-sizing/border-box@2x.png"></div> <div class="text"> <p>Text</p> </div> </div> </div>

Alexey Sindyukov Alexey Sindyukov sixteen · Accepted Answer · 2019-01-21T07:03:41

 * { padding: 0; margin: 0; font-size: 0; box-sizing: border-box; } #gallery_wrapper { overflow-x: auto; } #gallery { height: 200px; white-space: nowrap; width: 100%; } #gallery .item { display: inline-block; height: 100%; border: 1px solid black; } #gallery .item img { height: calc(100% - 30px); } #gallery .item .text { height: 30px; background: orange; font-size: 16px; text-align: center; line-height: 30px; }

 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"/> <title>Gallery</title> </head> <body> <div id="gallery_wrapper"> <div id="gallery"> <div class="item"> <img src="http://placehold.it/700x1000" alt=""> <div class="text">700x1000</div> </div> <div class="item"> <img src="http://placehold.it/500x300" alt=""> <div class="text">500x300</div> </div> <div class="item"> <img src="http://placehold.it/200x400" alt=""> <div class="text">200x400</div> </div> <div class="item"> <img src="http://placehold.it/1500x600" alt=""> <div class="text">1500x600</div> </div> </div> </div> </body> </html>

meine 3,501 2 gold marks 6 silver marks 19 bronze marks · Answer 2 · 2019-01-19T19:36:07

In order for img know that it can not climb out of the container, you just need to specify max-width: 100%; .

And in order for the container to change in size of the image, the max-width: 100%; property max-width: 100%; worth removing. And also all the properties that you previously registered inside the image block

 img { max-width: 100%; }

 html, body { display: flex; flex-direction: column; height: 100%; width: 100%; align-items: center; justify-content: center; margin: 0; padding: 0; } .slider { display: flex; align-items: center; justify-content: flex-start; flex: 0 1 90%; width: 100%; white-space: nowrap; overflow-x: auto; } .image { flex: 0 1 auto; height: 100%; border: black 1px solid; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } .image-container { flex: 0 1 90%; height: 100%; display: flex; } .text { flex: 1 1 10%; display: block; background: chocolate; text-align: center; padding: 4px 10px; }

 <div class="slider"> <div class="image"> <div class="image-container"><img src="https://ru.fishki.net/picsw/012012/05/post/krasota/tn.jpg"></div> <div class="text"> <p>Text</p> </div> </div> <div class="image"> <div class="image-container"><img src="https://learn.javascript.ru/article/box-sizing/border-box@2x.png"></div> <div class="text"> <p>Text</p> </div> </div> <div class="image"> <div class="image-container"><img src="https://learn.javascript.ru/article/box-sizing/border-box@2x.png"></div> <div class="text"> <p>Text</p> </div> </div> <div class="image"> <div class="image-container"><img src="https://learn.javascript.ru/article/box-sizing/border-box@2x.png"></div> <div class="text"> <p>Text</p> </div> </div> <div class="image"> <div class="image-container"><img src="https://learn.javascript.ru/article/box-sizing/border-box@2x.png"></div> <div class="text"> <p>Text</p> </div> </div> </div>

When max-width is specified, all slider elements are compressed in width so that the entire slider occupies 100% of the screen without scrolling, and the images inside are deformed.
I do not need them to get out of the container, but to adjust the container to the width of the image in width.
That is, you want that container in which to be our picture, was arranged under the real width of this picture?
This is the problem that for some reason the width of the container does not adjust to the images.

Flexbox gallery

2 answers 2

More articles: