我在基于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屏幕的结果。
答案 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。