Баннер и рубрика

Question

Я просто хочу создать изображение с заголовком и кнопкой сверху.

Текст и кнопка должны быть в контейнере с установленной шириной. Я просто хочу знать, что это лучший способ сделать это.

Есть много способов заставить вас запутаться в Интернете, и я не знаю, какой из них лучше!

Answer 1

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

Скажем, ваше фоновое изображение 2000 x 1000 px. Скажем, экран в настоящее время имеет ширину 800 пикселей. Затем вы хотите, чтобы контейнер с фоновым изображением был на высоте 400 пикселей. Для достижения этого без установки жестко закодированных точек останова вы можете использовать «трюк для заполнения». Если вы установите прописку (сверху или снизу) дочернего элемента в процентах, она вычисляет высоту в процентах от ширины родительского элемента. Поэтому, если вы установите верхнюю часть контейнера на 50%, она будет в два раза выше, чем родительский элемент. Таким образом, в случае 2000 x 1000 px: 1000/2000 * 100 = 50%.

.parent_w_bg { 
    background-image: url(...); 
    width: 100%; 
} 
.container { 
    width: 500px; 
    margin: 0 auto; 
    padding-top: 50%; // Assuming the background image's aspect ratio is 1:2 
} 

<div class="parent_w_bg"> 
    <div class="container"> 
    Header and button etc. 
    </div> 
</div> 

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

Вот простой скрипкой: https://jsfiddle.net/mmcc5rnk/

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

Answer 2

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

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

background: url('images/image.jpg') no-repeat center center/cover; 

Есть много способов для достижения своей цели, но наиболее актуальным способ делать вещи с помощью Flexbox model.

Все свойства flexbox должны быть prefi xed, поэтому они могут работать во всех браузерах.

Объяснение того, как Flex работает слишком широко для ответа, поэтому вам придется изучить его с нуля.

Адрес Fiddle, который представляет вашу цель.

Answer 3

No need to add different images for each breakpoint, 
image will resize automatically, you can add dynamic height by using jQuery 

Demo here