Динамическое изменение размера div для фонового изображения

У меня есть фоновое изображение в заголовке, которое автоматически изменяется по ширине окна. Однако высота не регулируется должным образом — унаследованное свойство CSS устанавливает для div фиксированную высоту 50 пикселей.

В настоящее время я использую:

background-size: cover;

Я могу указать фиксированную высоту для наблюдаемого элемента div, но тогда фон будет правильным только для определенного размера окна. Если я устанавливаю размер на автоматический или 100%, он становится равным 50px; Как я могу заставить его игнорировать высоту, которая, по его мнению, должна быть, и просто автоматически изменить размер div заголовка на фоновое изображение, которое подстраивается под размер окна?


css background-image image-resizing
person Kyle Banerjee    schedule 20.08.2015    source источник
comment
Не могли бы вы поделиться еще кодом, HTML, CSS...?   -  person Roko C. Buljan    schedule 21.08.2015
comment
Это приложение ruby ​​on rails, в котором код, css и т. д. даже для того, что находится в этом div, разбросаны по нескольким файлам. Я старался свести информацию к минимуму, чтобы вопрос был читаемым, но я согласен, что легче помочь, когда предоставлен контекст. Как оказалось, изменить размер div на изображение bg с помощью стилей невозможно. Скорее изображение нужно поместить в div и задвинуть обратно.   -  person Kyle Banerjee    schedule 21.08.2015

Ответы (2)


arrow_upward
2
arrow_downward

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

img.header-image {
    width: 100%;
    height: 100%;
}

div.header-wrapper {
    position: relative;
}

div.header-contents {
    position: absolute;
    width: 100%;
    top: 0;
    color: #ffffff;
}
<div class="header-wrapper">
    <img class="header-image" alt="Cat Background" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR39_wPEnBeSEOiHXW1Lc0rwqhEVktULcqnvDDA4J-DZL0gndic" />
    <div class="header-contents">Here are some header contents.</div>
</div>
<div class="body-contents">And some regular content.</div>

person Eraph    schedule 20.08.2015

arrow_upward
0
arrow_downward

Вы пытались использовать определенный размер, как это?

background-size: 100% 100%;
person themich    schedule 20.08.2015
comment
Этот метод привел к тому, что ширина изменилась правильно, а высота осталась фиксированной, а не изменила размер, чтобы сохранить соотношение сторон. - person Kyle Banerjee; 21.08.2015