Html 背景图像-约束比例

我有一个有背景图像的div。Div的宽度od为20%-我希望它根据用户分辨率改变大小。问题是我无法强制背景图像缩放约束比例。 此外，我有一个标签-我希望我被放置在第一个div的底部

以下是我想要实现的目标：

我的代码：

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

---

我查看了您的代码，似乎您没有为.box指定高度-因此这会导致内容折叠到内容的高度，完全模糊背景图像

我可以建议您使用.box元素的组合，并将元数据标签和位置包装在另一个元素中，然后将其绝对定位在框中

.盒子{ 浮动：左； 宽度：19.60%； 左缘：0.40%； 边缘顶部：10px； 文本对齐：居中； 背景图像：urlhttps://download.unsplash.com/photo-1426200830301-372615e4ac54; 背景尺寸：封面； 位置：相对位置； 垫底：19.60%； } 梅塔先生{ 背景色：rgba0,0,0,75； 位置：绝对位置； 底部：0； 左：0； 右：0； } .标签{ 字号：28px； 颜色：fff； 字体系列：Roboto； 字体大小：300； 背景色：rgba60,60,62,0.5； } .说明{ 字体大小：12px； 颜色：fff； 字体系列：Roboto； 字体大小：300； 背景色：rgba60,60,62,0.5； 文本转换：大写； }

.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;
}