帶有imgs的自舉平方磚

我想用背景圖像和一些文本里面的自舉col - * - *類（適當的尺寸）創建平方磚。帶有imgs的自舉平方磚

現在我用的擠壓墊與

margin-top: 100%

跟隨塊的內容：

position: absolute; 
top: 15px; 
left: 15px; 
right: 15px; 
bottom: 15px;

但是，當我設置背景圖片就變得非常難看該塊，所以我想我應該用標記以正確調整圖像大小。

所以我試圖使像類bgimage：

width: 100%; 
object-fit: cover;

我還設置溢出：隱藏於母公司塊，但這並沒有幫助，圖像變得漂亮，但現在從我的塊超出。

現在我有2個問題：

有沒有更好的方式平方塊來設定圖像背景涵蓋了嗎？
如何爲這些塊（頂部，左側，底部，右側設置，沒有其他方式？需要在小型設備上調整大小）設置適當的填充和餘量？

來源

2016-08-31 Sindbag

設置平方縮略圖內文字的背景圖像。您需要添加更多的分度的位置是：絕對和背景大小：覆蓋

在CODEPEN

HTML檢查示例代碼：

<div class="container"> 
    <div class="row"> 

    <div class="col-xs-6 col-sm-4 col-md-3"> 
     <div class="margin-top"></div> 
     <a href="#x" class="square-text">Section1</a> 
     <div class="square-img"></div> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
     <div class="margin-top"></div> 
     <a href="#x" class="square-text">Section2</a> 
     <div class="square-img"></div> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
     <div class="margin-top"></div> 
     <a href="#x" class="square-text">Section3<br>para2</a> 
     <div class="square-img"></div> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
     <div class="margin-top"></div> 
     <a href="#x" class="square-text">Section4</a> 
     <div class="square-img"></div> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
     <div class="margin-top"></div> 
     <a href="#x" class="square-text">Section1</a> 
     <div class="square-img"></div> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
     <div class="margin-top"></div> 
     <a href="#x" class="square-text">Section2</a> 
     <div class="square-img"></div> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
     <div class="margin-top"></div> 
     <a href="#x" class="square-text">Section3<br>para2</a> 
     <div class="square-img"></div> 
    </div> 
    <div class="col-xs-6 col-sm-4 col-md-3"> 
     <div class="margin-top"></div> 
     <a href="#x" class="square-text">Section4</a> 
     <div class="square-img"></div> 
    </div> 

    </div> 
</div>

CSS：

.margin-top { 
    margin-top: 100%; 
} 

.square-text { 
    position: absolute; 
    top: 15px; 
    bottom: 0; 
    left: 15px; 
    right: 0; 
    text-align: center; 
    padding-top: calc(50% - 30px); 
    z-index: 9; 
    background: transparent; 
    color: #fff; 
} 

.square-img { 
    background: url('http://www.themdfactor.com/wp-content/uploads/2015/11/image7.jpg') no-repeat; 
    position: absolute; 
    top: 15px; 
    bottom: 20px; 
    left: 15px; 
    right: 0; 
    background-size: cover; 
}

希望它可以幫助你享受:)

來源

2016-08-31 18:15:01

正如我所說的，使用背景給我蹩腳的圖像，以及如何使他們平方（高度=寬度）？ – Sindbag

@sindbag請檢查上面的CODEPEN鏈接，因爲我修改了答案。我希望這能解決這個問題。 –

如果你舉了個例子，就很容易解決你的問題。

爲了適合圖像，您可以使用img-responsive類型的引導程序。或者使用：

body { 
    background-color: black; 
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

如果您對Bootstrap Grid有正確的想法，那麼您將能夠根據自己的意願設計自己的塊。您可以從this獲得幫助。

來源

2016-08-31 17:46:02

帶有imgs的自舉平方磚

回答

相關問題