Question

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

两者：background-size: cover;和background-size: 100%;似乎无法正常工作。

Answer 1

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

.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％大小。

Answer 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。

Answer 3

将图像放在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;
}

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

3 个答案: