it-swarm.dev

Elastyczny obraz tła w pełnej szerokości div

Próbuję dowiedzieć się, jak zrobić obraz tła w pełnej szerokości i reagować. Obraz tła rozszerza się na szerokość strony (i jest responsywny), ale wysokość obrazu nie jest jego pełną wysokością. Wygląda na to, że jest jakoś odcięty. Używam struktury bootstrap, a powodem, dla którego próbuję to zrobić, jest nałożenie tekstu na obraz. Próbowałem tak wielu różnych rzeczy, ale wydaje mi się, że nie potrafię tego zrozumieć, pomóż! 

<div class="bg-image">
  <div class="container">
    <div class="row-fluid">
      <div class="span12">
        <h1>This is some text</h1>
      </div>
    </div>
  </div>
</div>


  .bg-image {
  background: url(img/image.jpg) no-repeat center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-height: 450px;
  }
14
Drew

Oto jeden ze sposobów uzyskania pożądanego projektu.

Zacznij od następującego kodu HTML:

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="nav">nav area</div>
            <div class="bg-image">
                <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
                 <h1>This is centered text.</h1>
            </div>
            <div class="main">main area</div>
        </div>
    </div>
</div>

Zauważ, że obraz tła jest teraz częścią regularnego przepływu dokumentu.

Zastosuj następujący CSS:

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;
}
.bg-image h1 {
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.nav, .main {
    background-color: #f6f6f6;
    text-align: center;
}

Jak to działa

Obraz ma ustawioną regularną zawartość przepływu o szerokości 100%, więc dostosuje się do szerokości kontenera nadrzędnego. Jednak chcesz, aby wysokość była nie większa niż 450 pikseli, co odpowiada szerokości obrazu 1200 pikseli, więc ustaw maksymalną szerokość obrazu na 1200 pikseli. Możesz zachować obraz na środku używając display: block i margin: 0 auto.

Tekst jest malowany na obrazie przy użyciu pozycjonowania bezwzględnego. W najprostszym przypadku rozciągam element h1 na pełną szerokość elementu nadrzędnego i używam text-align: center__ do wyśrodkowania tekstu. Użyj górnego lub dolnego przesunięcia, aby umieścić tekst tam, gdzie jest potrzebny.

Jeśli obrazy banerów będą się różniły współczynnikiem proporcji, będziesz musiał dynamicznie dostosować wartość maksymalnej szerokości dla .bg-image img za pomocą jQuery/Javascript, ale w przeciwnym razie takie podejście ma wiele do zaoferowania.

Zobacz demo na stronie: http://jsfiddle.net/audetwebdesign/EGgaN/

14
Marc Audet

Gdy użyjesz background-size: cover, obraz tła zostanie automatycznie rozciągnięty, aby pokryć cały kontener. Współczynnik proporcji jest jednak zachowywany, więc zawsze tracisz część obrazu, chyba że proporcje obrazu i zastosowany element są identyczne.

Widzę dwa sposoby rozwiązania tego problemu: 

  • Wykonaj nie zachowuj współczynnika proporcji obrazu, ustawiając background-size: 100% 100% Spowoduje to również, że obraz pokryje cały kontener , Ale stosunek nie zostanie zachowany. Wadą jest to, że zniekształca to twój obraz i dlatego może wyglądać dziwnie, w zależności od obrazu. Z obrazem, którego używasz na skrzypcach, I Sądzę, że możesz sobie z tym poradzić.

  • Możesz także obliczyć i ustawić wysokość elementu za pomocą javascript , opartej na Na jego szerokości, aby uzyskać taki sam stosunek jak obraz. To Obliczenia należałoby wykonać przy obciążeniu i zmianie rozmiaru. Powinno być Łatwe z kilkoma liniami kodu (nie wahaj się zapytać, czy chcesz przykład ). Wadą tej metody jest to, że twoja szerokość może stać się bardzo mała (na urządzeniach mobilnych), a zatem również obliczona wysokość .__, co może spowodować przepełnienie zawartości kontenera. To Może być rozwiązane poprzez zmianę rozmiaru zawartości lub czegoś , Ale dodaje trochę złożoności do rozwiązania /

7
Pevara

Spróbowałem również tego stylu na tle jonowej aplikacji hybrydowej. ma to również styl na efekt rozmycia tła.

.bg-image {
   position: absolute;
   background: url(../img/bglogin.jpg) no-repeat;
   height: 100%;
   width: 100%;
   background-size: cover;
   bottom: 0px;
   margin: 0 auto;
   background-position: 50%;


  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

}

0
Code Spy