Фоновое изображение, которое масштабируется на веб-странице

Question

На сайте wetransfer часто есть фоновые изображения, которые масштабируются при изменении размера браузера.Я бы хотел добиться того же эффекта самым простым способом.Другими словами, если я перетащу нижний угол окна браузера, я бы хотел, чтобы фоновое изображение изменилось соответственно по размеру.

Answer 1

Вы можете сделать это, как описано в этом руководстве .

Из этого руководства простой способ сделать это с помощью CSS - использовать свойство background-size.

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Крышка позволяет растянуть изображение, сохраняя соотношение сторон, чтобы полностью использовать одно измерение содержащей области. Альтернативные значения содержат, который растягивает изображение с его соотношением сторон, чтобы полностью вписаться в область, или 100% 100%, который растягивает изображение при разрушении соотношения сторон.

Вы также можете взглянуть на справочник по CSS 3 в w3schools

Answer 2

Вам даже не нужно использовать JS.CSS3 сделает это за вас:

html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Answer 3

Самый простой способ - не требуется CSS3 или HTML5:

img {
 max-width: 100%;
}

EDIT

Только что понял, что ваш вопрос относится к фоновым изображениям, так что вы можете использовать это:

background-size: 100% 100%;

Answer 4

посмотрите на это:

http://css -tricks.com / how-to-resizeable-background-image /

Answer 5

Я недавно сделал полноэкранный слайдер контента jQuery, который использует полноэкранные изображения, поэтому я много исследовал в этом тишине.

После просмотра бесчисленных учебных пособий, которые, как утверждается, приводят к полноэкранному фоновому изображению, янашел отличную статью, в которой описывается, как этого добиться с помощью примерно четырех различных техник - и это так просто, что вы можете сделать это за 10 минут.

Вот ссылка на статью: http://css -tricks.com/perfect-full-page-background-image/

И просто для справки, вот ссылка на слайдер, который я сделал: http://hieroishere.com/fullscreenslider/

Наслаждайтесь