背景图像 - 约束比例

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/

提供图片。