Как отправить выровненное снизу фоновое изображение под сгибом, когда мы изменяем размеры окна или уменьшаем размер экрана?

Question

См. Этот пример http://jsfiddle.net/nMs56/

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

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

как это например

CSS

html, body { height: 100%; }
body { background: url("img/iphone_34.jpg") no-repeat bottom center; }

Answer 1

bottom center сохраняет нижнюю часть изображения по нижнему краю области просмотра при изменении его размера.Поэтому, когда окно укорачивается, изображение смещается вверх для компенсации.

Попробуйте top center, чтобы всегда держать верхний край изображения выровненным по верху области просмотра.

JSFiddle

РЕДАКТИРОВАТЬ:

В соответствии с дальнейшим обсуждением с OP, было сделано следующее с использованием JavaScript / jQuery ...

1) Возвращается начальная высота окна.

2) Высота изображения вычитается из высоты окна, чтобы получить смещение от верхней части окна.

3) background-position изображения фиксируется с помощью jQuery css() с вычисленным смещением от вершины.

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

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

Исходный CSS-код размещения изображения остается нетронутым как запасной вариант. Без JavaScript изображение будет по-прежнему располагаться внизу, как в исходном коде OP.

Демонстрация полного окна: http://jsfiddle.net/nMs56/12/show/

код: http://jsfiddle.net/nMs56/12/

Answer 2

Это должно сделать это.

http://jsfiddle.net/qHNJL/4/

http://jsfiddle.net/qHNJL/4/show

HTML:

<!-- #hideImg and the image inside it is for getting the image height without defining a static height. -->
<div id="hideImg">
    <img src="http://digitaldaily.allthingsd.com/files/2007/06/iphone_34.jpg" alt"" />
</div>

<!-- The actual image -->
<div id="Image"></div>

Answer 3

Просто укажите вертикальную позицию в пикселях, например, так:

body { background: url("http://digitaldaily.allthingsd.com/files/2007/06/iphone_34.jpg") no-repeat center 100px; }

Когда вы используете нижнюю часть, она соответствует размеру страницы.Если вы хотите исправить это, укажите значение.

ОБНОВЛЕНИЕ:

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

Все типы значений:

background-position: {{процент |длина |левый |центр |right} 1 или 2 значения |наследовать};

Answer 4

Это нормально, вы установили фон в «нижнем центре», поэтому он будет выровнен по нижней части тела, попробуйте зафиксировать его сверху, и у вас все должно быть в порядке.