Question

我有一个包含div（.tablet）的section容器。部分和Div都是响应式的

当视口达到＆gt; 400px，我想在我的div（.tablet）中显示背景图片

但是，除非我指定px宽度和高度，否则div会折叠并消失。它忽略了背景图像。它几乎就像背景图像不存在而且div没有内容！

是否可以使用不会折叠的灵活背景图像创建resposnive DIV？我希望背景图像填充DIV并以div大小响应？

我已尝试将以下规则与.tabletonly div

一起使用

 background-size: cover;
 background-position: center;
 background-attachment: fixed; /* Fixbackground * */

// --------------------------------------------- -----------------------

HTML 

<!DOCTYPE html PUBLIC>

<head>
     <title></title>
      <link rel="stylesheet" type="text/css" href="styles/style1.css"/> 

</head> 
<body>

<div id="wrapper">
<div id="section">




 <div id="tabletonly" class="span_1_of_2">
    <div><div>
    </div> 


</div> // end wrapper
</body>  
</html>

CSS代码----------------------------------------

.span_1_of_2 {
    width: 45%;
    position: relative;
}


img {
    max-width: 100%; 
}



@media screen and (min-width: 400px) {

#tabletonly div{
    background: url("images/shop.jpg" );
    background-repeat: no-repeat;
}

}

Answer 1

如果您知道背景图像的纵横比，可以使用“诀窍”来防止框崩溃 - 使用边框框大小调整，将高度设置为0，并为div添加填充-bottom反映了这个比例。

.image-box {
    background: url('http://placehold.it/600x300/eee/ccc');
    background-size: cover;
    height: 0;
    padding-bottom: 50%; /* match this to the aspect ratio of your picture */
}

fiddle

话虽这么说，另一位评论者有一个观点;根据您的使用情况，也许这应该是内嵌图像而不是背景图像？

Answer 2

尝试类似的东西。如果我确实理解了你的问题，它会将背景图像居中，它也会保持定量。

background-size:contain;
background-position: center center;
background-repeat:no-repeat;
background-image: url(../images/YourBackgroundImage.png);

使用“包含”会使您的图像脱墨或插入，但会完全可见。确保您的背景图像足够大屏幕，

该位置将从顶部和底部居中。确保图像不会重复，因为它看起来很糟糕。当然还有想要作为背景的图像。

Answer 3

我认为你的tabletonly div的高度为0，因为它没有可显示的内容。也许你可以指定min-height（即可以使用vh，％或px）或用内容填充div。很难说，因为我不知道你需要什么div。

DIV折叠背景图像

3 个答案: