用于媒体查询和高度问题的css
提问于 2013-06-01 22:31:49
我有一个div的图像背景，我想在不同的设备上显示，问题是我必须给出图像的高度，以便正确地适合它。现在在不同的手机上，我必须用不同的像素来调整高度。例如，在iphones上，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"> </div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-06-01 22:43:30
你可以使用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;
}也是
我建议改变你的思维模式，首先使用最大宽度和小屏幕，使用最小宽度并变大。
你并不真的需要div.testing --它可以是.testing
如果你使用背景图片有很好的理由...你应该研究制作div -
.thing {
height: 0;
padding-bottom: 30%; /* play with this */
}这将保持比例。但它只在特定情况下有用。
一个完整的jsfiddle与一个实际的图像将是有用的。
祝好运!
Stack Overflow用户
发布于 2013-06-01 22:34:42
将div嵌套在背景div中，并将高度设置为100%
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16877921
复制相关文章
点击加载更多
腾讯云开发者
