Bootstrap-grid網格+flex照片排版

Bootstrap-grid網格+flex做以下圖片全滿版排版

   <作品完成圖>

1.滿版外圍設定container-fluid
2.第一排三張圖片齊排, col網格為12,3張圖片為每一個佔col-4寬度,但因為照片比網路寬度還大,所以無法完全顯現.

3.所以要另外設定調整圖片大小 ( background-size )

    .bg-cover{

        background-size: cover;

        background-position: center center;

    }

background-size: cover;
使用於背景圖片小於容器時，將背景圖片的大小放大至容器的大小並填滿，缺點是如果容器的長寬比例與背景圖片的長寬比例不吻合，會出現背景圖片失真的情況。

4.第二排最左邊大圖排版,這張大圖佔兩張小圖寬度,最右邊插一張小圖,所以這一行排版分為col-8,col-4兩種. 第二行圖片顯示希望他是"符合裝置高度",所以設定

<div class="row" style="height: 100vh">

        <div class="col-8 bg-cover" style="background-image: url()">

</div>

    </div>

height:100vh 意思是 100%符合框架高度

5

5.右邊的col-4 包含2張圖片並且是垂直向, 所以 col-4裡面另外用一個div包兩層div display:flex;的bootstrap縮寫是d-flex , 垂直高度flex-column , 因為一張大的區塊分給兩個照片 高度h50, 上一層div為h100.

6.可以發現旁邊有兩個邊框,因為有預設的padding,外面包一個row 解決這個問題

*其實d-flex是bootstrap內建排版方式,可以省略,但為了學習用,才特別另外增加

 <div class="row" style="height: 100vh">

        <div class="col-8 bg-cover" style="background-image: url()">

</div>

        <div class="col-4 bg-cover">

            <div class="row d-flex flex-column h-100 ">

            <div class="h-50 bg-cover " style="background-image: url()

></div>

            <div class="h-50 bg-cover" style="background-image: url()>

</div>

            </div>

            

        </div>