另一个带Bootstrap的不规则图库

时间:2015-07-16 15:58:05

标签: html css twitter-bootstrap image-gallery

我在基于Bootstrap的不规则图库中遇到问题。 Here's the design. http://alkoholeregionalne.pl/galeria11.jpg

我试图将红色图像的高度设置为与两行小黄色图像的高度相等,但是当屏幕宽度发生变化时,高度将会缩小或不均匀地增长。

我认为它可以连接到每个图像的尺寸。

我应该算一算吗?我的意思是“a”和“b”代表红色,“c”和“d”代表黄色。

如何使图像中的高度匹配?

<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>

新:我添加了第一个小提琴:here

在小提琴上你必须得到更大的左下窗口以查看md / lg屏幕的结果。

2 个答案:

答案 0 :(得分:0)

所有图像的比例是否与我假设的不相同?

如果没有,那么我会建议底层答案中的3个资源: How to make a responsive grid of photos using Twitter Bootstrap if heights are different

答案 1 :(得分:0)

最后我找到了解决方案,放在这里,而不是在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>

并拥有自己的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;}
}

在xs和sm屏幕上,宽度为col-12,因此red.jpg和yellow.jpg的宽度均为400px。