Как сделать так, чтобы изображение всегда загружалось в центре страницы?

Question

Как сделать так, чтобы изображение всегда загружалось в центре страницы?

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");
            }
            }



    });

Спасибо!!! :)

Naomi K 22 сен. 2013, в 23:49

Источник

Теги:

jquery

html

css

2 ответа

0

#bgimage {    
    margin: 0 auto;
    width: px ore %;
    }

Anton Essential 22 сен. 2013, в 20:42

Ещё вопросы

RCNeil · Accepted Answer · 2013-09-22T19-45-00.000Z

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

Используя этот метод, изображение будет центрированным и текучим (поэтому оно будет автоматически изменяться в зависимости от размера вашего браузера или контейнера).

Если ваше окно экрана/браузера меньше 960x720, вам необходимо удалить эти минимальные свойства и позволить ему быть текучим. Контейнер, внутри #bgimage находится #bgimage, также может определять этот максимальный/минимальный размер с этими свойствами.

Кроме того, вместо большого количества JS вы также можете использовать медиа-запросы для настройки размеров на основе окна.

@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;
    }



}

спасибо, так что я должен удалить минимальную высоту и минимальную ширину? если я это сделаю, то ничего не изменится :(
По-разному. Если вы уберете минуты, то изображение будет плавным и корректируется в зависимости от размера окна. например ( jsfiddle.net/7YhX5 ) изображение естественно 1900x1200, но из-за CSS оно масштабируется до окна (обратите внимание, когда вы настраиваете размер окна). Так что, если вы абсолютно хотите, чтобы это изображение соответствовало, то я бы просто использовал ширину 100% и убрал бы минимумы.