30
2013
11

Jquery和CSS使背景图片自动适应大小

对于一些设置北京图片时,常常会不能自动适应屏幕大小,搜索后找到一个方法: 

<!DOCTYPE html>
<html>   
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            Jquery和CSS使背景图片自动适应大小
        </title>
        <style type="text/css">
            .slideContent { width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/da.jpg',
            sizingMethod='scale'); -moz-background-size:100% 100%; background-size:100%
            100%; }
        </style>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js">
        </script>
        <script type="text/javascript">
            $(function() {
                cover();
                $(window).resize(function() {
                    cover();
                });
            });
            function cover() {
                var h = $(window).height();
                var w = $(window).width();
                $(".slideContent").height(h);
                $(".slideContent").width(w);
            }
        </script>
       
        <body>
            <div class="slideContent">
            </div>
        </body>
</html>

«1»