0

商品を中央に配置した画像でウェブページを作ろうとしています。しかし、製品が途切れてしまい、画像全体を見るために下にスクロールする必要があります.

画像が中央になるようにロードするにはどうすればよいですか?

体内で

<img alt="The Argan Tree Product Line" src="images/products2.jpg" id="bgimage" class="mainimage"/>

要素のCSS

#bgimage{
  z-index: -999;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
  position: relative;
min-width:960px;
min-height:720px;
}

このjqueryを使用して、ブラウザのサイズが異なる場合に画像のサイズを変更しています

$(document).ready(function()
{   
    if ($(document).height() < (.75 * $(document).width())){
        var wide = $(document).width();
        if (wide>960){
        $("#bgimage").css("min-width", wide + "px");
        var high = .75 * $(document).width();
        $("#bgimage").css("min-height", high + "px");
        $("#content-wrapper").css("width", wide +"px");
        $("#content-wrapper").css("height", high +"px");
    }
    }

    if ($(document).height() >= (.75 * $(document).width())){
        var high = $(document).height();
        if (high>720){
        var wide = 1.33 * high;
        $("#content-wrapper").css("width", wide +"px");
        $("#content-wrapper").css("height", high +"px");
    }

効果をクリックするための追加のコードはこちら (この質問では削除してください...コードが多すぎます!)

}
    $(window).resize(function()
    {
        if ($(window).height() < (.75 * $(window).width())){
            var wide = $(window).width();
            if (wide>960){
            $("#bgimage").css("min-width", wide + "px");
            var high = .75 * wide;
            $("#bgimage").css("min-height", high + "px");
            $("#content-wrapper").css("width", wide +"px");
            $("#content-wrapper").css("height", high +"px");
            }
        }

        if ($(document).height() >= (.75 * $(document).width())){
            var high = $(document).height();
            if (high>720){
            var wide = 1.33 * high;
            $("#content-wrapper").css("width", wide +"px");
            $("#content-wrapper").css("height", high +"px");
            }
            }



    });

ありがとうございました！！！:)

4

2 に答える 2

0 
#bgimage {    
    margin: 0 auto;
    width: px ore %;
    }
于 2013-09-22T21:51:28.023 に答える
0 
#bgimage { 
   display:block;
   width:100%;
   max-width:100%;
   height:auto;
   margin:0px auto;
   position:relative;
   min-width:960px;
   min-height:720px;
}

Using this method, the image will be centered and fluid (so it will automatically adjust based on your browser or container size).

If your screen/browser window is smaller than 960x720, then you have to remove those minimum properties and let it be fluid. The container that #bgimage is inside can also determine this maximum/minimum size with these properties.

Also, instead of a lot of JS, you can use media queries to adjust sizes based on the window, too.

@media all and (max-width:960px) {

     #bgimage { 
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
        margin:0px auto;
        position:relative;
        min-width:480px;
        min-height:360px;
    }



}
于 2013-09-22T21:28:01.287 に答える