Фоновые изображения с контентом, используя отзывчивый дизайн

Question

Я пытаюсь получить голову вокруг фоновых изображений в отзывчивом дизайне. На этой странице примера (http://test.scoe.net/rfox/usalResponsive6/indexTeacher5.html) у меня есть большая фотография с текстом и несколькими кнопками, наложенными на нее. Я очень заботился о расположении и размере текста и кнопок при определенных ширинах окна: полноэкранный, 1024px, 768px, 640px, 480px и 320px. На этих ширинах макет выглядит достаточно хорошо. Это промежуточные размеры, где вещи сбиваются с пути. Вещи выглядят нормально при больших размерах, но как только я перетаскиваю окно браузера меньшим, около 760 пикселей, изображение начинает масштабироваться, и я получаю большие промежутки между ним и следующим элементом ниже. Любые предложения по подходу, которые нужно предпринять, чтобы он выглядел прилично для разных размеров вдов?

Answer 1

Это хорошее начало.

Проблема в том, что пространство, выделенное для текста, становится все меньше и меньше по мере того, как область просмотра становится меньше. В вашей примерной ссылке, видя героя под 480px, текст имеет ширину ширины ~ 165 пикселей, потому что вы используете проценты, и поэтому он начинает выглядеть неудобно.

Предлагаю поменять фоновое изображение на другое, что позволяет больше места для текстового контейнера. Изображение bg в любом случае функционирует как контекстная информация, а ваш текст - ваше истинное содержание.

Ваш текстовый контейнер действительно должен быть почти 100% для чего-либо ниже 480px. Для примера, который может быть похож на ваш, см. https://fi.google.com/signup, как их начальные абзацы занимают только левые, но, как ваш масштаб вниз, текстовый контейнер проходит.

В коде:

@media only screen and (max-width: 479px) { 
    .zTchrBlurb-xs visible-xs { 
     width: 90%; 
    } 
} 

Answer 2

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

https://johnpolacek.github.io/imagefill.js/

Один подход, который я взял в прошлом работа с фоновыми изображениями, которые необходимы для масштабирования:

background-repeat: no-repeat; 
background-position: 100%; 
background-size: cover; 
width: 100%; 
height: 260px;