0

我有一个要在不同设备上显示的 div 的图像背景，问题是我必须给出图像的高度才能正确适应它。现在在不同的手机上，我必须用不同的 px 调整高度。例如，在 iphone 上，65px 适用于纵向模式，但不适用于横向等。有没有办法让 div 的高度调整大小以覆盖 100% 的背景图像？这是我的代码

<style>
    div.testing {
        height: 95px;
        background-image: url(/myimageurl);
        background-repeat: no-repeat;
        background-size: 100%;
    }
    @media screen and (max-width: 320px) {
        /* iphone portrait */
        div.testing {
            height: 65px;
        }
    }
    @media screen and (min-width: 321px) and (max-width: 480px) {
        /* iphone portrait */
        div.testing {
            height: 80px;
        }
    }
   </style>

    <div class="testing">&nbsp;</div>
4

2 回答 2

1

你可以使用背景尺寸：封面；

.thing {
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

但你为什么使用背景图像？如果您可以使用常规图像，则可以这样做：

.thing {
    width: 100%;
    max-width: [your biggest width];
}

.thing img {
    display: inline-block;
    width: 100%;
    height: auto;
}

还

我会建议你在最大宽度上翻转你的心态，首先从小屏幕开始，使用最小宽度并变大。

而且你真的不需要 div.testing - 它可以只是 .testing

如果你有充分的理由使用背景图片......你应该调查制作 div -

.thing { 
    height: 0;
    padding-bottom: 30%; /* play with this */
}

这将保持比例......但它仅在特定情况下有用。

带有实际图像的完整 jsfiddle 会很有用。

祝你好运！

于 2013-06-01T22:43:30.297 回答
0

将您的 div 嵌套在背景 div 中并将高度设置为 100%

于 2013-06-01T22:34:42.193 回答