как я могу сформировать размер изображения в соответствии с его вложенной рамкой

Question

есть веб-сайт: SPAM Я пытаюсь сделать ту же самую домашнюю страницу этого сайта, используя js, jquery и некоторые CSS.

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

Вы можете столкнуться с просмотром веб-сайта SPAM в разных разрешение или маленький и большой размер окна проводника.

Как я могу это сделать? Ответы и помощь кода или предложения для лучшего пользовательского опыта для SPAM?

Answer 1

Это флэш ... но вы можете сделать то же самое с некоторыми jQuery:

HTML:

<div id="container"></div>

CSS:

#container {
    min-width: 500px;
    width: 100%;
    height: 100%;
    position: relative
    background: url('path') 0 0 no-repeat;
}

JQuery:

$(window).bind("resize", function() {
    var $winwidth = $(window).width(); //specify some padding here
    $("#container").attr({
        width: $winwidth
    });
});

Answer 2

Вы можете использовать

margin: 0 auto;

на внутреннем элементе, чтобы он был выровнен по горизонтали.

Answer 3

Для начала сделайте <did id='main'>, чтобы взять ширину экрана

#main { width:100% }

, тогда изображения внутри должны иметь похожий стиль:

#main img { width:100% }

обратите внимание, что высота изображения не установлена, чтобы она автоматически масштабировалась с правильными пропорциями.

Это должно помочь получить эффект, подобный упомянутому сайту.