pal pal - 2 months ago 5
CSS Question

multiple responsive Image fit into single div with css

enter image description here

I want to create this type of structure with images. I'm using bootstrap, is it possible to create this type of layout with bootstrap,if not then how?

here is the sample code:



.side_padding { padding-left: 2.5%; padding-right: 2.5%; }
.img_holder { object-fit: fill; width: 90%; }

<div class="selection">
<div class="container">
<div class="row side_padding">
<div class="col-sm-5">
<div class="img_holder banner"><img src="images/img1.jpg" class="img-responsive" alt=""/></div>
<div class="img_holder banner"><img src="images/img2.jpg" class="img-responsive" alt=""/></div>
</div>
<div class="col-sm-3 center-block">
<div class="img_holder banner"><img src="images/img3.jpg" class="img-responsive" alt=""/></div>
<div class="img_holder banner"><img src="images/img4.jpg" class="img-responsive" alt=""/></div>
</div>
<div class="col-sm-4">
<div class="img_holder banner"><img src="images/img5.jpg" class="img-responsive" alt=""/></div>
<div class="img_holder banner"><img src="images/img6.jpg" class="img-responsive" alt=""/></div>
<div class="img_holder banner"><img src="images/img7.jpg" class="img-responsive" alt=""/></div>
</div>
</div>
</div>
</div>




Answer

Essentially the example is a basic 3 column layout with images. If you want a perfect square then you need fixed aspect ratios for each image (or more accurately containers that will "crop" them using overflow:hidden).

If height not being even isn't an issue then you should be able to just do something like (jsfiddle - https://jsfiddle.net/1axajum5/) - all you need to do is vertical spacing with margin on the images or padding/margin on the rows however I've omitted this to keep things focused on the layout as tweaking the padding is trivial once the layout has been implemented:

<div class="selection"> 
        <div class="container">
            <div class="row side_padding">
                <div class="col-sm-5">
                    <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div>
                    <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div>
                </div>
                <div class="col-sm-3 center-block">
                    <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div>
                    <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div>
                </div>
                <div class="col-sm-4">
                    <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div>
                    <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div>
                    <div class="row"><img src="https://placehold.it/350x150" class="col-sm-12" alt=""/></div>
                </div>
            </div>
        </div>
    </div>

Essentially you can nest columns as needed BUT columns apply a negative margin to compensate for padding applied on the row so if nesting columns (almost) always wrap them in a row.

Comments