背景圖像 - 約束比例

Question

我有一個div與背景圖像。 Div的寬度爲20％ - 我希望它根據用戶分辨率改變其大小。問題是我無法強制背景圖像縮放約束比例。 此外，我有一個標籤 - 我想我被安置在第一個div的底部。

這是我想要完成的任務：

我的代碼：

<a href=""> 
     <div class="box"> 
      <div class="label">Beijing</div> 
      <div class="description">August 2014</div> 
     </div> 
    </a> 

我的CSS：

.box { 
    float: left; 
    width: 19.60%; 
    margin-left:0.40%; 
    margin-top:10px; 
    text-align:center; 
    background-image: url("beijing.png"); 
    background-size: cover; 
} 

.label { 
    font-size:28px; 
    color:#fff; 
    font-family:Roboto; 
    font-weight:300; 
    background-color: rgba(60, 60, 62, 0.5); 
} 

.description { 
    font-size:12px; 
    color:#fff; 
    font-family:Roboto; 
    font-weight:300; 
    background-color: rgba(60, 60, 62, 0.5); 
    text-transform:uppercase; 
} 

Answer 1

我看過你的代碼，它似乎你沒有指定高度爲.box - 所以這c使內容崩潰到內容的高度，完全模糊背景圖像。

我可以建議的是，您使用.box元素的padding bottom hack to dictate a fixed aspect ratio的組合，並將元數據（標籤和位置）包裹在另一個元素中，然後絕對地將其放置在框中。

.box { 
 
    float: left; 
 
    width: 19.60%; 
 
    margin-left:0.40%; 
 
    margin-top:10px; 
 
    text-align:center; 
 
    background-image: url("https://download.unsplash.com/photo-1426200830301-372615e4ac54"); 
 
    background-size: cover; 
 
    position: relative; 
 
    padding-bottom: 19.60%; 
 
} 
 
.meta { 
 
    background-color: rgba(0,0,0,.75); 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.label { 
 
    font-size:28px; 
 
    color:#fff; 
 
    font-family:Roboto; 
 
    font-weight:300; 
 
    background-color: rgba(60, 60, 62, 0.5); 
 
} 
 

 
.description { 
 
    font-size:12px; 
 
    color:#fff; 
 
    font-family:Roboto; 
 
    font-weight:300; 
 
    background-color: rgba(60, 60, 62, 0.5); 
 
    text-transform:uppercase; 
 
}

<a href=""> 
 
    <div class="box"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
     </div> 
 
    </div> 
 
</a>

---

更妙的是：我知道這可能不是你仔細找什麼，但不是用百分比來決定利潤再減去從小數寬度，您可以做的只是使用CSS flexbox或CSS列來完成繁重的工作（取決於您希望元素流向哪個方向）。

另外，使用CSS爲每個.box元素單獨指定背景圖像可能太費事。您可以將背景圖像存儲爲HTML5的data-屬性值，然後使用JS（在這種情況下，我將使用jQuery使代碼更具可讀性，但是原始JS方法完全可行）以迭代方式分配背景圖像。

$(function() { 
 
    $('.box').each(function() { 
 
    $(this).css('background-image', 'url('+$(this).data('bg')+')'); 
 
    }); 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    padding: 5px; 
 
} 
 
.box { 
 
    display: block; 
 
    margin: 5px; 
 
    width: calc(20% - 10px); 
 
    padding-bottom: 19.60%; 
 
    text-align:center; 
 
    background-size: cover; 
 
    position: relative; 
 
} 
 
.meta { 
 
    background-color: rgba(0,0,0,.75); 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.label { 
 
    font-size:28px; 
 
    color:#fff; 
 
    font-family:Roboto; 
 
    font-weight:300; 
 
    background-color: rgba(60, 60, 62, 0.5); 
 
} 
 

 
.description { 
 
    font-size:12px; 
 
    color:#fff; 
 
    font-family:Roboto; 
 
    font-weight:300; 
 
    background-color: rgba(60, 60, 62, 0.5); 
 
    text-transform:uppercase; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1426200830301-372615e4ac54"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1423683249427-8ca22bd873e0"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421091242698-34f6ad7fc088"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421809313281-48f03fa45e9f"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421757295538-9c80958e75b0"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421940975339-33bdde74a873"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421977870504-378093748ae6"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1421930451953-73c5c9ae9abf"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1422310299561-e3b8b45d859f"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
    <a href="" class="box" data-bg="https://download.unsplash.com/photo-1423483641154-5411ec9c0ddf"> 
 
    <div class="meta"> 
 
     <div class="label">Beijing</div> 
 
     <div class="description">August 2014</div> 
 
    </div> 
 
    </a> 
 
</div>

的 https://unsplash.com/

提供圖片。