如何缩放背景图像以适应响应式 div答案

【问题标题】：How to scale background-image to fit responsive div如何缩放背景图像以适应响应式 div
【发布时间】：2015-02-19 05:22:26
【问题描述】：

我正在尝试制作“你知道吗？”固定 div 在右上角。不幸的是，经过 3 小时的测试，许多解决方案仍然找不到正确的解决方案。正如你在这个小提琴上看到的： http://jsfiddle.net/dq8f3d4p/我无法让背景适合div。

background-size: cover; 和 background-size: 100%; 似乎都不能正常工作。

【问题讨论】：

标签： html css background responsive-design background-image

【解决方案1】：

将图像放入 div 中，然后将 div 固定在右下角

<div class="dyk">
    <img src="http://i.imgur.com/gxp9iDV.png"></img>
</div>

.dyk{
    position: fixed;
    z-index:2;
    right: 0;
    bottom: 0;
}

【讨论】：

【解决方案2】：

您可能正在寻找background-size:contain;，这通常是最好的选择，但是，在您的情况下，图像比例和div 的比例不一样，所以我建议使用background-size: 100% 100%;。

    background: url(http://i.imgur.com/gxp9iDV.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

工作jsFiddle

注意事项：

IE9+支持background-size
如果您不希望图像被拉伸，请使用 contain。

【讨论】：

【解决方案3】：

在您的代码中，您将使用简写 background 属性覆盖 background-size：

.dyk{
    position: fixed;
    z-index:2;
    width: 17.26%;
    height: 11%;
    left: 80%;
    top: 80%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(http://i.imgur.com/gxp9iDV.png);
}

将其更改为 background-image 属性将导致图像拉伸到 100% 大小。

【讨论】：