Question

我有一个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>

Answer 1

您可以使用background-size：cover;

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

ALSO

我建议首先在最大宽度上翻转你的思维模式，然后先使用最小宽度并开始变大，开始使用小屏幕。

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

如果您使用背景图片的原因很充分......您应该调查制作div -

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

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

一个包含实际图像的完整jsfiddle将非常有用。

祝你好运！

Answer 2

将div嵌入背景div并将高度设置为100％

css媒体查询和高度问题

2 个答案: