Html / Css - Как заставить изображение растягивать 100% ширину контейнера, а затем отображать другое изображение поверх него?

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

Вот пока что html:

<div id="header">
    <img src="/img/headerBg.jpg" alt="" class="headerBg" />
    <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a>
    <div id="loginBox">
        other code
    </div>
</div>

И css пока:

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
}

#loginBox {
    float: right;
    width: 23.5%;
    height: 128px;
    font-size: 75%;
}

.headerBg {

}

.logo {
    width: 50%;
    height: 120px;
    float: left;
    display: block;
    padding: 5px;
}

Я пытаюсь сделать так, чтобы изображение headerBg.jpg отображалось на 100% ширине «заголовка» div, так что по сути это будет фон самого div. Затем отобразите изображение «logo.png» и div «loginBox» над «headerBg.jpg».

Логотип должен быть перемещен в крайний левый конец, а loginBox - в крайний правый угол, как в CSS.

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

Я пробовал различные дополнения и изменения конфигурации, но ни одно из них не помогло мне добиться того, что я хочу.

Я добавил изображение в CSS в качестве фона в div заголовка, но оно не растягивается на 100% таким образом.

Может ли кто-нибудь дать некоторое представление об этом?

Также любые уроки, посвященные подобным вещам, станут отличным дополнением к моей коллекции!

Спасибо!


image html css stretch
person Craig van Tonder    schedule 14.04.2012    source источник

Ответы (6)


arrow_upward
3
arrow_downward 

.header {
    position: relative;
}

.headerBg {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
}

Обратите внимание, что это приведет к масштабированию изображения по ширине <div>; если вы хотите, чтобы его размер изменялся только по горизонтали, вам следует явно указать высоту.

Вы также можете попробовать max-width: 100%;, если хотите, чтобы изображение масштабировалось только в больших окнах.

person Neil    schedule 14.04.2012

arrow_upward
0
arrow_downward

Просто сделайте фоновое изображение заголовка истинным фоном этого div. Float не игнорирует другие объекты, как это делает position: absolute.

#header {
    height: 130px;
    margin: 5px 5px 0 5px;
    border: #0f0f12 outset 2px;
    border-radius: 15px;
    background: url(headerBg.jpg);
}
person mxniu    schedule 14.04.2012
comment
Привет и спасибо, но это не позволяет мне растянуть изображение до ширины эластичного div. - person Craig van Tonder; 15.04.2012

arrow_upward
0
arrow_downward

Установите класс div, который не будет показывать никаких дополнительных частей.

div {
overflow: hidden;
}
person fahomid    schedule 17.06.2013

arrow_upward
0
arrow_downward

Эти настройки сработали идеально для меня .. это будет размер вашей фотографии для всех фотографий ..

#headerBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;

}

person NICK    schedule 04.05.2015

arrow_upward
-2
arrow_downward

попробуйте использовать в своем css:

max-height:100%;
person Anmol Maheshwari    schedule 22.02.2017

arrow_upward

arrow_downward

person    schedule
comment
спасибо за ответ, но это не решает проблему для меня. Я пробовал это, но поскольку изображение имеет ширину 1084 пикселей, когда разрешение дисплея увеличивается до большего, чем это, оно не занимает всю ширину контейнера, в данном случае header, когда оно увеличивается в соответствии с шириной монитора. Изначально я выбрал изображение в коде, чтобы иметь возможность растягивать его. - person Craig van Tonder; 15.04.2012
comment
используйте размер фона: 100% 100%; - person chadpeppers; 15.04.2012
comment
Это css3 и не очень удобен для браузера: / Вот почему я пытался найти способ изменить размер изображения, не прибегая к этому. - person Craig van Tonder; 15.04.2012