Question

我试图在响应式设计中了解背景图像。在这个示例页面（http://test.scoe.net/rfox/usalResponsive6/indexTeacher5.html）中，我有一张带有一些文字的大照片和一些覆盖它的按钮。我特别注意在特定窗口宽度下定位和调整文本和按钮的大小：全屏，1024px，768px，640px，480px和320px。在这些宽度，布局看起来相当不错。这是事物误入歧途的中间尺寸。对于较大的尺寸，情况看起来不错，但是一旦我将浏览器窗口拖得更小，大约760px，图像本身就会开始缩放，我和它下面的下一个项目之间会有很大的差距。关于采取哪种方法来保持它在不同的寡妇尺寸上保持体面的任何建议？

Answer 1

这是一个好的开始。

问题在于，随着视口变小，分配给文本的空间变得越来越小。在你的示例链接中，看到480px以下的英雄，文本只有〜165px的宽度可以使用，因为你使用百分比，所以它开始看起来很尴尬。

我建议将背景图片换成另一个图像，以便为文本容器留出更多空间。无论如何，bg图像充当上下文信息，您的文本就是您的真实内容。

对于480px以下的任何内容，您的文本容器几乎应该是100％。有关可能与您类似的示例，请参阅jQueryFormValidate其初始段落仅占用左侧，但随着您的缩放向下，文本容器跨越。

在您的代码中：

@media only screen and (max-width: 479px) {
    .zTchrBlurb-xs visible-xs {
        width: 90%;
    }
}

Answer 2

我过去也遇到过这个问题，您可以更改背景位置以进行相应的调整和调整，但我个人在这里找到了这个库 - 非常宝贵。

https://johnpolacek.github.io/imagefill.js/

我过去采用的一种方法是处理需要扩展的背景图像：

background-repeat: no-repeat;
background-position: 100%;
background-size: cover;
width: 100%;
height: 260px;

使用响应式设计的内容背景图片

2 个答案: