Html/Css - Jak uzyskać obraz, aby rozciągnąć 100% szerokość kontenera, a następnie wyświetlić na nim inny obraz?

Mam problemy z uzyskaniem układu nagłówka, który mam na myśli razem.Html/Css - Jak uzyskać obraz, aby rozciągnąć 100% szerokość kontenera, a następnie wyświetlić na nim inny obraz?

Oto html do tej pory:

<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>

A css do tej pory:

#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; 
}

Co staram się osiągnąć, to mieć obrazu "headerBg.jpg" wyświetlacz do 100 % szerokość div "header", więc w zasadzie będzie to tło samego div. Następnie umieść obraz "logo.png" i okno div "loginBox" powyżej "headerBg.jpg".

Logo powinno zostać przeniesione na koniec po lewej stronie, a loginBox powinien znajdować się po prawej stronie, tak jak w css.

Po usunięciu zdjęcia, logo i element div są umieszczone poprawnie, ale po wprowadzeniu obrazu dwa pływające elementy są umieszczane po obrazie w przepływie.

Próbowałem różnych dodatków i rekonfiguracji, ale żaden z nich nie udowodnił, jak tego chcę.

Dodałem obrazek w css jako tło do div nagłówka, ale nie rozciąga się w ten sposób w 100%.

Czy ktoś mógłby przedstawić wgląd w to?

Także tutoriale obejmujące takie rzeczy będą wspaniałym dodatkiem do mojej kolekcji!

Dziękujemy!

Źródło

2012-04-14 Craig van Tonder

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
#header { 
    position:relative; 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
} 

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

} 

.headerBg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
} 

.logo { 
    position:relative; 
    width: 50%; 
    height: 120px; 
    float: left; 
    display: block; 
    padding: 5px; 
} 
    </style> 
</head> 
<body> 
<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> 

</body> 
</html>

Źródło

2012-04-14 21:50:49 chadpeppers

dzięki dla twojej odpowiedzi, ale to nie rozwiązuje problemu dla mnie. Próbowałem tego, ale ponieważ obraz ma szerokość 1084px, kiedy rozdzielczość wyświetlania wzrasta do tego większego, nie zajmuje on całej szerokości kontenera, w tym przypadku 'nagłówka', ponieważ rośnie, aby dopasować szerokość monitora.To jest pierwotnie dlatego zdecydowałem się na obraz w kodzie, aby móc go rozciągnąć. –

użyj tła: 100% 100%; – chadpeppers

To jest css3 i niezbyt przyjazny dla przeglądarki:/Dlatego próbowałem znaleźć sposób na zmianę rozmiaru obrazu bez uciekania się do tego. –

Po prostu ustaw obraz tła nagłówka jako prawdziwe tło tego elementu div. Float nie ignoruje innych obiektów w taki sposób, jak pozycja: absolutna.

#header { 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
    background: url(headerBg.jpg); 
}

Źródło

2012-04-14 21:51:26 mxniu

Cześć i dzięki, ale to nie pozwala mi rozciągnąć obrazu, aby dopasować go do szerokości elastycznego dzioba. –

.header { 
    position: relative; 
} 

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

Zauważ, że to będzie skalowanie obrazu w celu dopasowania do szerokości <div>; jeśli chcesz zmienić rozmiar tylko w poziomie, powinieneś wyraźnie ustawić wysokość.

Możesz również wypróbować max-width: 100%;, jeśli chcesz skalować obraz tylko w dużych oknach.

Źródło

2012-04-14 22:22:30 Neil

Ustaw klasę div, która nie będzie zawierała żadnych dodatkowych części.

div { 
overflow: hidden; 
}

Źródło

2013-06-17 04:47:47 fahomid

Ustawienia te pracował dla mnie idealny .. to będzie rozmiar zdjęcia dla wszystkich ur fotki ..

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

}

Źródło

2015-05-04 06:45:27 NICK

-1

spróbować użyć w CSS:

max-height:100%;

Źródło

2017-02-22 06:22:29

Html/Css - Jak uzyskać obraz, aby rozciągnąć 100% szerokość kontenera, a następnie wyświetlić na nim inny obraz?

Odpowiedz

Powiązane problemy