在缩小或放大时使我的页面适合屏幕

时间:2013-09-18 12:07:14

标签: html css html5 css3 zoom

对不起,如果我的语气不好! 这是我的HTML和CSS代码 的 CSS:

 #home article {
background: url(../images/top_bg.png) repeat;
height: 100%;
position: absolute;
text-align: center;
top: 0px;
border: solid 7px #FFFFFF;
width: 99%;
}

HTML:

    <section id="home" data-speed="10" data-type="background" style="background-position: 50% 0px;">
---- Some Code to display ---        

</section>

问题:我的问题是:当我使用(ctrl, - 或ctrl,+)放大或缩小时,我的页面应该保持适合屏幕。不应出现水平滚动条。

这是示例页面:放大并缩小以了解我的问题。 http://jenslehmann.com/#/ambassador

1 个答案:

答案 0 :(得分:0)

您可以在css中使用以下代码:

.background { background: none repeat scroll 0 0 #FFFFFF; height: 200%; left: -50%; position: fixed; width: 200%;}

.background img{ bottom: 0; display: block; left: 0; margin: auto; min-height: 50%; min-width: 50%; right: 0; top: 0;}