2015-08-28 25 views
1

以下是我在寻找:http://tinyurl.com/oe3ydvr。无论窗口的大小,html调整都适合并且完美呈现。我已经检查了CSS代码,但我仍然无法弄清楚。我读的地方做如下:图片/含量调整为网页调整大小,始终保持结构

<style> 
    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; 
    </style> 

我所尝试的一切已经落空。我真的很感谢在这个问题上的一些封闭,谢谢jmr333 :)

+2

但愿我建议你查了一些这必将帮助你更清楚地了解这整个主题有以下几个方面:“响应式设计”,“媒体查询”。其实这两个就足以让你开始。 –

+0

^答案比发布的答案更好 – Popnoodles

+0

谢谢,我确实需要对这个主题有更好的理解。我将研究“响应式设计”&&“媒体查询”。 – jmr333

回答

1

好吧,这里有很多事情正在进行,主滑块容器slider1_container被调整为像素大小,适合javascript的视口(与一个img标签里面)。文本块不是文本,而是图像,并以这种方式进行缩放 - 从许多角度来看,这是非常糟糕的做法。您的代码涉及到背景图像如何能规模“的好办法”,同时调整视

+0

谢谢你的洞察力。 。 。当我重新设置示例链接的大小时,幻灯片放映就是我希望整个网站做的事情。符合交换机的重新调整大小。 – jmr333

1

你不能风格你的网站的背景像显示在您的示例代码,与性能直接在脚本的基础水平标签。你总是要的风格特定HTML元素,即div,或bodyhtml,并在这方面分配属性:

body { 
    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; 
} 

有关背景属性的例子见w3schools

在提到的网站,实际上是复杂的JavaScript在工作风格上旗帜的(#slider1_container)宽。这很容易被发现,因为它的内联css属性可以动态调整,而你改变你的浏览器窗口的宽度...

作为一个更简单的开始,以max-width: 100%开始为shown here

我猜测,最有可能你会想开始与特定的100%-width-DIV(以及在上面某些元素),而不是整个页面的背景。 (有没有必要对JavaScript对这些基本知识)

+0

http://www.w3fools.com/ – Popnoodles

+1

但是,不需要任何JavaScript来控制英雄旗帜的大小。 – Popnoodles

+0

谢谢你,我一定会检查一下w3schools对这个问题的看法。 – jmr333