css - 响应式布局，将没有内容的div拉伸(stretch)到最大宽度

<div style="max-width:768px;height:auto;margin:auto;position:relative;">
 <div id="fix" style="background-repeat:no-repeat;background-size:cover;background-image:url('../facebook.png');min-width:100%;min-height:100%;max-width:256px;max-height:256px;"></div>
</div>

我一直在尝试使id =“ fix”的div响应，除了背景图像之外，没有任何内容可以显示。

如果分辨率允许，我希望div以256px开始。

有任何想法吗？ （Maby我将不得不在这上面使用javascript吗？）

最佳答案

您在代码中两次使用了最小高度/宽度。首先，您需要检查屏幕是否超过256像素，可以在CSS中通过以下方式完成操作：

@media screen and (min-width: 256px, min-height: 256px){
    #id {
        min-width: 256px;
        min-height: 256px;
    }
}

如果这些规则无法匹配，则您可以在查询之外进行标准设置。像这样：

#id { width: 100%; height: 100%; }

@media screen and (min-width: 256px, min-height: 256px){
    #id {
        min-width: 256px;
        min-height: 256px;
    }
}

关于css - 响应式布局，将没有内容的div拉伸(stretch)到最大宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24494928/