我希望jquery flexboxes以与图像相同的方式响应。 目前，当我调整窗口大小时，柔性版不会缩小以适应我作为jumbotron背景图像的灰色图片。盒子伸展过图像并创建空白区域。
我试图让柔性盒缩小甚至重新排列，这样它们就可以放在小屏幕上并与jumbotron保持一致。
我想最简单的解决方案是使用方框扩展背景图像。
我在代码笔上进行此操作，因此这里有一个链接：https://codepen.io/blkgurlcode/pen/qqJzYX
<!-- Begin pg 2 -->
<div class="jumbotron gap img-fluid" id="bend">
<!-- Flex Boxes -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-8 col-lg-8 flex">
<a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="325" height="175">A</a>
<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a>
<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a>
<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a>
</div>
<div class="col-xs-6 col-md-4 text-box">
<p>Portfolio</p>
</div>
</div>
</div>
</div>
这是CSS：
/* Page 2 */
#bend {
background-size: cover;
background-image: url("http://i68.tinypic.com/jfupsz.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 0px;
max-width: 100%;
min-height: 800px;
}
/*flex boxes */
.flex {position:relative; max-width:850px;min-height:300px;margin-top:150px;margin-left:80px;padding:0px;}
.flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;}
[bg=a] {background-image:url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);}
[bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
[bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
[bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
[bg=e] {background-image:url(http://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
[bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
[bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
[bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
[bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
[bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
[bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;}
div p{
}
/* pg 2 txt */
p {
text-align:center;
margin-top: 200px;
font-size: 70px;
font-weight: bold;
letter-spacing: 5px;
color: #021a40;
}