it-swarm.com.de

Responsives Hintergrundbild in voller Breite

Ich versuche herauszufinden, wie man ein Hintergrundbild in voller Breite und reaktionsfähig macht. Das Hintergrundbild dehnt sich über die gesamte Seitenbreite aus (und reagiert darauf), aber die Höhe des Bildes ist nicht die volle Höhe. Es scheint, als wäre es irgendwie abgeschnitten. Ich verwende das Bootstrap-Framework, und ich versuche das zu tun, weil ich dem Bild etwas Text überlagern möchte. Ich habe so viele verschiedene Dinge ausprobiert, aber ich kann es nicht verstehen, helfen! 

<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

Hier ist eine Möglichkeit, das gewünschte Design zu erhalten.

Beginnen Sie mit dem folgenden 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>

Beachten Sie, dass das Hintergrundbild nun Teil des regulären Dokumentenflusses ist.

Wenden Sie das folgende CSS an:

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

Wie das funktioniert

Das Bild hat einen regulären Fließinhalt mit einer Breite von 100%, sodass es sich selbst an die Breite des übergeordneten Containers anpasst. Sie möchten jedoch, dass die Höhe nicht mehr als 450px beträgt, was der Bildbreite von 1200px entspricht. Legen Sie daher die maximale Breite des Bildes auf 1200px fest. Sie können das Bild zentriert halten, indem Sie display: block und margin: 0 auto verwenden.

Der Text wird mit absoluter Positionierung über das Bild gezeichnet. Im einfachsten Fall strecke ich das h1-Element auf die volle Breite des übergeordneten Elements und verwende text-align: center, um den Text zu zentrieren. Verwenden Sie den oberen oder unteren Versatz, um den Text dort zu platzieren, wo er benötigt wird.

Wenn Ihre Bannerbilder im Seitenverhältnis variieren, müssen Sie die maximale Breite für .bg-image img mithilfe von jQuery/Javascript dynamisch anpassen. Ansonsten bietet dieser Ansatz jedoch viel.

Demo unter: http://jsfiddle.net/audetwebdesign/EGgaN/

14
Marc Audet

Wenn Sie background-size: cover verwenden, wird das Hintergrundbild automatisch so gedehnt, dass es den gesamten Container abdeckt. Das Seitenverhältnis wird jedoch beibehalten, sodass Sie immer einen Teil des Bildes verlieren, es sei denn, das Seitenverhältnis des Bildes und das Element, auf das es angewendet wird, sind identisch.

Ich sehe zwei Möglichkeiten, wie Sie das lösen können: 

  • nicht das Seitenverhältnis beibehalten des Bildes durch Einstellen von background-size: 100% 100% Dadurch wird das Bild auch den gesamten Container __. überdecken, das Verhältnis wird jedoch nicht beibehalten. Nachteilist, dass dies Ihr Bild verzerrt und daher je nach Bild sehr seltsam aussehen kann Mit dem Bild, das Sie in der Geige verwenden, denke ich, dass Sie damit durchkommen könnten.

  • Sie können auch die Höhe des Elements mit Javascript berechnen und festlegen, basierend auf Auf der Breite, sodass es das gleiche Verhältnis wie das Bild erhält. Diese Berechnung müsste beim Laden und bei der Größenänderung durchgeführt werden. Mit ein paar Zeilen Code sollte es einfach genug sein. (Fragen Sie einfach nach einem .__-Beispiel). Der Nachteil dieser Methode ist, dass Ihre Breite (auf mobilen Geräten) sehr klein werden kann und daher auch die berechnete Höhe (_), wodurch der Inhalt des Containers möglicherweise überläuft. Dieses Könnte gelöst werden, indem auch die Größe des Inhalts oder Etwas geändert wird, aber dies erhöht die Komplexität der Lösung /

7
Pevara

Ich habe diesen Stil auch für den Hintergrund der ionischen Hybrid-App ausprobiert. Dies hat auch Stil für den Hintergrundunschärfeeffekt.

.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