背景图片的高度和宽度适应每个屏幕尺寸

Question

I've been working for some time on my first website. 我已经在第一个网站上工作了一段时间。 I have the CSS working but I still need to fix some simple, but no so simply issues. 我可以使用CSS，但仍需要修复一些简单但不是那么简单的问题。 In the index.html file I have a background picture attached to the html. 在index.html文件中，我有附加到html的背景图片。 So I have a fullscreen background picture attached via CSS to the html tag. 因此，我通过CSS将全屏背景图片附加到html标签。 This is the CSS code: 这是CSS代码：

html{   background: no-repeat center center fixed; 
-webkit-background-size: cover;     -moz-background-size: cover;
-o-background-size: cover;  -ms-background-size: cover;
background-size: cover; }

But I'm loading the pictures via Javascript. 但是我正在通过Javascript加载图片。 My objective is to have an array of pictures and each time a user loads the website or triggers it a random picture will be displayed. 我的目标是拥有一组图片，每当用户加载该网站或触发该网站时，就会显示随机图片。 So I have this code in Javascript which is working: 所以我在Javascript中有这段代码正在工作：

$(document).ready(function()  {
  var randomImages = ['img1','img2','img3','img4','img5'];
   var rndNum = Math.floor(Math.random() * randomImages.length);
   $("html").css({
      background: "url(_img/bg/index_rnd/" + randomImages[rndNum] + ".jpg)
      no-repeat"
    });
});

All these codes are working. 所有这些代码都有效。 The pictures are selected from an array and displayed randomly once they are loaded. 图片是从数组中选择的，加载后会随机显示。 But I have a great problem which I cannot find a clear answer and I'm stuck. 但是我有一个很大的问题，我找不到一个明确的答案，我陷入了困境。 I would like that the width and the height are rezised , so the whole picture is displayed in the screen. 我想调整宽度和高度 ，以便将整个图片显示在屏幕上。 Of course each screen is different... I read something about innerhieght and innerwidth properties, but I do not know how to proceed. 当然，每个屏幕都是不同的...我读了一些有关innerhieght和innerwidth属性的信息，但我不知道该如何进行。 What should I do so the pictures resize to each different screen? 我应该怎么做才能将图片调整为每个不同的屏幕尺寸？

In this moment the pictures are with a resolution of 1024x683. 此时，图片的分辨率为1024x683。 I have a computer with a screen of 15"" and a resolution of 1440x900. 我有一台屏幕为15“”且分辨率为1440x900的计算机。 My pictures get always a bit more pixelated and to long in height to display, so a part of the picture is cut. 我的图片总是像素化，并且显示时要长一些，因此图片的一部分被剪切了。

Questions: 问题：

What should I do so the pictures resize to each different screen resolution? 我应该怎么做才能将图片调整为每个不同的屏幕分辨率？

A recommended picture resolution so the picture is displayed correctly? 建议的图片分辨率，以便正确显示图片？

Is there a way to display the picture into the exact size of a screen? 有没有办法将图片显示为确切的屏幕尺寸？ Even if its original format gets a bit modified? 即使其原始格式有所修改？

REPLY AFTER RECIEVING ANSWER ------------------------------------------------------------- NEW QUESTION ----------------------------------------------------------------------------- 收到答复后答复---------------------------------------------- ---------------新问题--------------------------------- --------------------------------------------

Hello, at last I had time to use the code... It does work properly. 您好，最后我有时间使用代码...可以正常工作。 I only needed to add the url to my image folder and magic!!! 我只需要将URL添加到我的图像文件夹中就可以了！ So my code is actually like this: 所以我的代码实际上是这样的：

$(window).load(function() {
    var randomImages = ['img1','img2','img3','img4','img5'];
    var rndNum = Math.floor(Math.random() * randomImages.length);

     var $win = $(this);
     var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + '.jpg').css({'position':'fixed','top':0,'left':0});
        function resize() {
            if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
              $img.css({'height':'100%','width':'auto'});
            } else {
              $img.css({'width':'100%','height':'auto'});
            }
        }
        $win.resize(function() { resize(); }).trigger('resize');
    });

Regarding my html I have for now an image with id background. 关于我的html我现在有一个ID背景的图像。 I want to center the image as told. 我想按照指示使图像居中。 So my question is if I should put this image in a div. 所以我的问题是是否应该将此图像放在div中。 If so, how can I make this image center itself in the center of the screen??? 如果是这样，如何使该图像本身位于屏幕中心？？？

Another question, before I had my image attachted to the html and now to an image. 另一个问题，在我将图像附加到html之前，现在是图像附加上了。 Therefore the image is influencing other elements I have in my body. 因此，图像影响着我体内的其他元素。 How can I make that this image be displayed behind all the other elements of my body?!?! 如何使该图像显示在我身体其他所有元素的后面？！？！ For example my logo and header_bg are transformed when my img id="background" is loaded. 例如，当我的img id =“ background”加载后，我的徽标和header_bg就会转换。

Can you help??? 你能帮我吗？？？

This is my html for any doubts... 如果有任何疑问，这是我的html ...

<body>
        <img id="background" src="" alt="" />
        <div id="header_img">
            <nav>
                <div id="header-bg-left">
                    <div id="nav-content">
                        <div id="logo">
                                <a href="index.html"><img alt="./_img/nav/logo.rosa.png" src="">logo</a>
                        </div>
                        <div id="categories">       
                                <ul>
                                    <li id="nav-quien"><a href="#">quien es</a>
                                        <ul>
                                            <li id="nav-biografia" class="drop1"><a href="biografia.html">biografia</a></li>
                                            <li id="nav-curriculum" class="drop2"><a href="curriculum.html">curriculum</a></li>
                                        </ul>
                                    </li>
                                    <li id="nav-galeria" class="marginli"><a href="gallery.html">galeria</a>
                                        <ul>
                                            <li id="nav-gal-nat" class="drop3"><a href="gallery.html">paisaje natural</a></li>
                                            <li id="nav-gal-urb" class="drop4"><a href="gallery.html">paisaje urbano</a></li>
                                        </ul>
                                    </li>
                                    <li id="nav-prensa" class="marginli"><a href="prensa.html">prensa</a></li>
                                    <li id="nav-links" class="marginli"><a href="links.html">links</a></li>
                                    <li id="nav-contacto" class="marginli"><a href="contacto.html">contacto</a></li>
                                </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <footer>    
            <div id="footer-bg-left">
                <div id="foot-content">
                    <p>Diseñado por <a href="mailto:daniramirezescudero@gmail.com">Daniel. R-Escudero</a> <span>|</span> Todos los derechos reservados <span>|</span> <a href="mailto:info@scalesplanet.com">info@rosasusaeta.com</a> <span>|</span><a href="http://www.linkedin.com/"><img src="./_img/footer/logo.linked.png"></a> <a href="http://www.facebook.com/"><img src="./_img/footer/logo.facebook.png"></a></p>
                </div>
            </div>  
        </footer>
    </body>

Answer 1

UPDATED 29 Nov 2012 2012年11月29日更新

demo: http://so.devilmaycode.it/height-and-width-of-background-picture-adapt-to-each-screen-size/ 演示： http : //so.devilmaycode.it/height-and-width-of-background-picture-adapt-to-each-screen-size/

        $(window).resize(function() {
            resize();
        });
        $(function() {
            $('#background').attr('src', 'http://cdn.com/bg.png').css({
                'position' : 'fixed',
                'top' : 0,
                'left' : 0
            });
            resize();             
        });
        function resize() {
            var $img = $('#background');
            if (($(window).width() / $(window).height()) < ($img.width() / $img.height())) {
                $img.css({
                    'height' : '100%',
                    'width' : 'auto'
                });
            } else {
                $img.css({
                    'width' : 'auto',
                    'height' : $(window).height() + 'px'
                });
            }
        }

<body>
  <img id="background" src="" alt=""/>
</body>

背景图片的高度和宽度适应每个屏幕尺寸

问题描述

1 个解决方案

解决方案1
3 已采纳 2012-04-29 15:35:48

背景图片的高度和宽度适应每个屏幕尺寸

问题描述

1 个解决方案

解决方案1 3 已采纳 2012-04-29 15:35:48

解决方案1
3 已采纳 2012-04-29 15:35:48