1

I have problem with irregular image gallery based on Bootstrap. Here's the design. http://alkoholeregionalne.pl/galeria11.jpg

I'm trying to set the red image's height equal with the height of the two rows of small yellow images, but when the width of the screen changes, the height's will shrink or grow unevenly.

I think it could be connected to the dimensions of each image.

Should I count it? I mean like "a" and "b" for red and "c" and "d" for yellow.

How can I make the the heights match like in the image?

<div class="row">
    <div class="col-md-6">
        <img src="red.jpg" />
    </div>
    <div class="col-md-6">
        <div class="col-md-2">
            <img src="yellow.jpg" />
        </div>
        <div class="col-md-2">
            <img src="yellow.jpg" />
        </div>
        <div class="col-md-2">
            <img src="yellow.jpg" />
        </div>
    </div>
</div>

NEW: I added on my first fiddle: here

On fiddle you've got to get larger left down window to see results for md/lg screen.

Marcin
  • 37
  • 5

2 Answers2

0

Will all of the images be the same proportions as shown I am assuming not?

If not then I would suggests the 3 resources in the bottom answer here: How to make a responsive grid of photos using Twitter Bootstrap if heights are different

Community
  • 1
  • 1
fred1234
  • 429
  • 1
  • 4
  • 26
  • All little, yellow images have c.a. the same height and width. The problems are:1. how to make this two rows always equal to red, big image on the left, I mean for screens md and lg and then 2. how to increase them (by f.e. img-responsive class) to be equal to red one (in xs and sm screen they go after red image). They are thumbnails, so I can initially crop them as I want. – Marcin Jul 16 '15 at 21:24
0

Finally I found solution, put here, not on jsfiddle.net:

<div class="row">
    <div class="col-md-6">
        <img src="red.jpg" class="dgalimg" />
    </div>
    <div class="col-md-6">
    <div class="row galrow">
        <div class="col-md-4">
            <img src="yellow.jpg" class="mgalimg" /></div>
        <div class="col-md-4">
            <img src="yellow.jpg" class="mgalimg" /></div>
        <div class="col-md-4">
            <img src="yellow.jpg" class="mgalimg" /></div>
  </div>
 <div class="row galrow">
 <div class="col-md-4">
            <img src="yellow.jpg" class="mgalimg" /></div>
        <div class="col-md-4">
            <img src="yellow.jpg" class="mgalimg" /></div>
        <div class="col-md-4">
            <img src="yellow.jpg" class="mgalimg" /></div>
       </div>
    </div>
</div>

And own css:

/* xs screen */
@media (max-width: 992px) {
 img.dgalimg {float:left;}
 img.mgalimg {width: initial;margin-bottom:18px;}
 div.galrow {display:block;margin-bottom:18px;}
}
/* medium screen,  */
@media (min-width: 992px) {
 img.dgalimg {float:right;}
 img.mgalimg {width: 136px;height:104px;}
 div.galrow {display:flex;flex-wrap:wrap;justify-content:space-between;align-content: stretch;margin-bottom:22px;}
}

On xs and sm screens the width is col-12, so both red.jpg and yellow.jpg are 400px width.

Marcin
  • 37
  • 5