Нижнее фиксированное изображение, как показано на прилагаемом скриншоте

Как показано на скриншоте ниже, я хотел бы поместить нижнее фиксированное изображение, которое должно появиться после (не более) некоторого содержимого (логотип и центральный текст описания) , Это изображение должно соответствовать ширине экрана.Нижнее фиксированное изображение, как показано на прилагаемом скриншоте

Я пришел с этими двумя неправильными решениями. Во-первых, с помощью CSS фона размер свойство:

// CSS 
.bg { 
    width: 600px; 
    height: 300px; 
    position: fixed; 
    bottom: 0; 
    left: 0%; 
    background: url('image.jpg') no-repeat center fixed; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
} 

// HTML part 
<div class="bg"></div>

Во-вторых, используя немного JavaScript, и распознающие изменить размер окна и настройки некоторых свойств CSS на тег изображения:

// JS 
     // some magick here... 
     if ((win_w/win_h) < ($bg.width()/$bg.height())) { 
      $bg.css({height: '100%', width: 'auto'}); 
     } else { 
      $bg.css({width: '100%', height: 'auto'}); 
     } 

// HTML Part (I'm using a shim) 
<img class="bg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: relative; left: 0; bottom: 0" />

Эти решения работают , но я не хочу, чтобы изображение покрывало (или являлось фоном) логотип и описание. Вы можете мне помочь?

example to achieve

источник

2013-07-10 Mich Dart

Почему так сложно? Просто разместите картинку ниже текстового описания и выше меню –

Это изображение должно соответствовать высоте окна. Я не хочу прокручивать вниз. Если я изменяю размер окна просмотра, он должен всегда фиксироваться в верхней части нижнего колонтитула и динамически регулировать его высоту. –

Вы можете просто сделать max-width: 100%; 'который будет сохранять изображение только размером с его контейнер (в этом случае viewport), и когда его ширина изменится, он будет масштабироваться должным образом и поддерживать его соотношение сторон. Для IE вам понадобится конкретная таблица стилей с 'width: 100%;' или прокладка для объявлений max-width' css. Дай мне знать, если это работает. –

Нечто подобное возможно: http://jsfiddle.net/

Что я сделал:

Я впервые применил липкую колонтитула: http://ryanfait.com/sticky-footer/
Затем я добавил дополнительный DIV для фона (внутри обертки содержимого, но это не требуется)
I po (аббревиатура и другое содержимое, на котором вы не хотите, чтобы фон был сзади), а нижнее значение равное высоте нижнего колонтитула. Влево и вправо я установил значение 0, чтобы он занимал всю ширину.
Я применил background-size: contain вы уже выяснили (до сих пор нуждается в префиксов в моем примере)

CSS-код для фона выглядит следующим образом:

#background { 
    background: url(...) no-repeat center; 
    background-size: contain; 
    position: absolute; 
    top: 30px; /* height of content above */ 
    bottom: 50px; /* height of content beneath */ 
    left: 0; 
    right: 0; 
    z-index: -1; /* to position it under the content, but as no content is covering it, you could leave it out as well */ 
}

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

источник

2013-07-10 22:37:47 Pevara

Ничего себе! Это именно то, что я искал. Огромное спасибо. Теперь я пытаюсь интегрировать его с Stellar.js для веб-сайта с вертикальным перемещением параллакса. Но это еще одна история;) Еще раз спасибо –

Нижнее фиксированное изображение, как показано на прилагаемом скриншоте

ответ

Смежные вопросы