0

私は私の最初のウェブサイトでしばらく働いています。私はCSSを機能させていますが、それでもいくつかの単純な問題を修正する必要がありますが、それほど単純な問題ではありません。index.htmlファイルには、htmlに背景画像が添付されています。そのため、CSSを介してhtmlタグにフルスクリーンの背景画像を添付しています。これは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; }

しかし、私はJavascriptを介して写真を読み込んでいます。私の目的は、一連の画像を用意することです。ユーザーがWebサイトをロードするかトリガーするたびに、ランダムな画像が表示されます。だから私は動作している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"
    });
});

これらのコードはすべて機能しています。画像は配列から選択され、読み込まれるとランダムに表示されます。しかし、私には明確な答えが見つからないという大きな問題があり、行き詰まっています。幅と高さを調整して、全体像を画面に表示したいのですが。もちろん、各画面は異なります...私はinnerhieghtとinnerwidthプロパティについて何かを読みましたが、どのように進めるかわかりません。写真がそれぞれ異なる画面にサイズ変更されるようにするにはどうすればよいですか？

この瞬間、写真の解像度は1024x683です。画面が15""で解像度が1440x900のコンピューターを持っています。私の写真は常に少しピクセル化され、表示するために高さが長くなるため、写真の一部がカットされます。

質問：

写真がそれぞれ異なる画面解像度にサイズ変更されるようにするにはどうすればよいですか？

画像が正しく表示されるように推奨される画像解像度？

画面の正確なサイズに画像を表示する方法はありますか？元のフォーマットが少し変更されたとしても？

回答を受け取った後に返信する---------------------------------------------- ---------------新しい質問--------------------------------- --------------------------------------------

こんにちは、ついに私はコードを使用する時間がありました...それは正しく動作します。画像フォルダと魔法にURLを追加するだけで済みました!!! したがって、私のコードは実際には次のようになります。

$(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');
    });

私のhtmlに関しては、今のところid背景の画像があります。言われた通りに画像を中央に配置したい。だから私の質問は、この画像をdivに入れるべきかどうかです。もしそうなら、どうすればこの画像自体を画面の中央に配置できますか？

もう1つの質問ですが、画像をhtmlに添付してから、画像に添付する前に。したがって、画像は私が私の体に持っている他の要素に影響を与えています。この画像を私の体の他のすべての要素の後ろに表示するにはどうすればよいですか？！？！たとえば、img id = "background"が読み込まれると、ロゴとheader_bgが変換されます。

手伝ってくれますか？？？

これは疑問のある私の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>
4

1 に答える 1

3

2012年11月29日更新

        $(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>
于 2012-04-29T15:35:48.483 に答える