如何從引導圖像網格中刪除微小的像素邊界？

我已經使用Bootstrap 3.7創建了一個圖像平鋪網格。所有的cols裏面都有一個背景圖，其背景圖設置爲100％。網格意味着所有圖像都相互正確對齊，並且完全沒有空白。如何從引導圖像網格中刪除微小的像素邊界？

問題是，當調整窗口到某些決議，我得到這些小（約1px的間隙）出現在電網和我似乎無法擺脫他們。他們在figcaption元素上變得更加突出。

這裏的HTML代碼的樣本（通過列重複）：

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
     <a href="#" class="rwp-site"> 
     <figure class="project-box" style="background-color: purple"> 
      <figcaption> 
      <div class="site-title"> 
       <p> 
       Site title #1 
       </p> 
      </div> 
      </figcaption> 
     </figure> 
     </a> 
    </div> 
    </div> 
</div>

和這裏是CSS：

.container { 
    background: aqua; 
} 

.col-xl-2, .col-lg-3, .col-md-4, .col-sm-6 .col-xs-12 { 
    padding-left: 0; 
    padding-right: 0; 
    overflow: visible; 
} 
.project-box { 
    height: 360px; 
    /* background-color: #ccc; */ 
    background-size: cover; 
    filter: grayscale(0); 
    transform: scale(1); 
    transition: all .3s ease-in-out; 
} 
.project-box:hover { 
    filter: grayscale(1); 
    transform: scale(0.98); 
    transition: all .3s ease-in-out; 
} 
figcaption { 
    position: absolute; 
    display: table; 
    width: 100%; 
    height: 35%; 
    background: rgba(0,0,0,0.6); 
    color: white; 
    font-size: 2.5rem; 
    text-align: center; 
    font-family: 'didact', sans-serif; 
} 
.rwp-site { 
    display: block; 
} 
.rwp-site:hover figcaption { 
    color: lightblue; 
} 
.rwp-site:before { bottom: 10px; left: 10px; } 
.rwp-site figcaption { left: 0; bottom: 0; } 

figcaption .site-title { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    padding: 0px 20px; 
} 

figcaption p { 
    margin: 0 auto; 
} 
.col-md-12.sites-sorting-menu, .bc-footer .col-md-12 { 
    text-align:center; 
}

這裏是一個的jsfiddle我提出重現問題：https://jsfiddle.net/coolwebs/s4531dmb/1/如果您調整顯示窗口的大小，您會看到出現小的白色間隙，尤其是在圖案之間。

有擺脫這些小間隙的方法嗎？它是否因爲分割列而引發引導問題？

來源

2017-02-15 Ryan Coolwebs

請問您能否更清楚地解釋一下。我在小提琴中觀察到的，我沒有看到任何白色的縫隙，你的問題是關於當我們調整窗口的大小時，在圖案之間出現一個小的白色縫隙。 – KiranPurbey

嘗試評論'/ * transform：scale（1）; * /'在'.project-box'類 –

哦，是的，只是注意到圖像是在防火牆後面（哎呀）。但是，如果沒有圖像，在瀏覽器縮小時（如CNTRL/CMD +/-或使用鼠標滾輪），您可以注意到小間隙。https://jsfiddle.net/s4531dmb/4/。也許這是一個渲染問題？ –

是相當奇怪的問題，也許幾乎是一個「邊緣情況」。我的解決方案是在列的兩邊添加微小的負邊距：

.col-xl-2, .col-lg-3, .col-md-4, .col-sm-6 .col-xs-12 { 
margin-left: -0.5px; 
margin-right: -0.5px; 
}

來源

2017-02-16 08:59:28

如何從引導圖像網格中刪除微小的像素邊界？

回答

相關問題