Hintergrundbild mit 100% Breite und automatischer Höhe

Ich arbeite derzeit an einer mobilen Zielseite für ein Unternehmen. Es ist ein wirklich einfaches Layout, aber unter der Kopfzeile befindet sich ein Bild eines Produkts, das immer 100% breit ist (das Design zeigt, dass es immer von Kante zu Kante geht). Abhängig von der Breite des Bildschirms wird die Höhe des Bildes offensichtlich entsprechend angepasst. Ich habe dies ursprünglich mit einem IMG (mit einer CSS-Breite von 100%) gemacht und es hat großartig funktioniert, aber ich habe festgestellt, dass ich Medienabfragen verwenden möchte, um verschiedene Bilder mit unterschiedlichen Auflösungen bereitzustellen - sagen wir ein kleines, mittleres und Zum Beispiel eine große Version desselben Bildes. Ich weiß, dass Sie das img src nicht mit CSS ändern können, daher dachte ich, ich sollte einen CSS-Hintergrund für das Bild verwenden, im Gegensatz zu einem img-Tag im HTML.

Ich kann nicht scheinen, dass dies richtig funktioniert, da das Div mit dem Hintergrundbild sowohl eine Breite als auch eine Höhe benötigt, um den Hintergrund anzuzeigen. Ich kann natürlich 'width: 100%' verwenden, aber was verwende ich für die Höhe? Ich kann eine zufällige feste Höhe wie 150px setzen und dann die oberen 150px des Bildes sehen, aber dies ist nicht die Lösung, da es keine feste Höhe gibt. Ich hatte ein Spiel und fand heraus, dass ich, sobald es eine Höhe gibt (getestet mit 150px), 'Hintergrundgröße: 100%' verwenden kann, um das Bild korrekt in das Div zu passen. Ich kann das neuere CSS3 für dieses Projekt verwenden, da es ausschließlich für Mobilgeräte gedacht ist.

Ich habe unten ein grobes Beispiel hinzugefügt. Bitte entschuldigen Sie die Inline-Stile, aber ich wollte ein einfaches Beispiel geben, um meine Frage etwas klarer zu machen.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Muss ich dem Container div möglicherweise eine prozentuale Höhe geben, die auf der gesamten Seite basiert, oder sehe ich das völlig falsch?

Denken Sie auch, dass CSS-Hintergründe der beste Weg sind, dies zu tun? Möglicherweise gibt es eine Technik, die je nach Geräte- / Bildschirmbreite unterschiedliche IMG-Tags bereitstellt. Die allgemeine Idee ist, dass die Zielseitenvorlage mehrfach mit unterschiedlichen Produktbildern verwendet wird, daher muss ich sicherstellen, dass ich dies auf die bestmögliche Weise entwickle.

Ich entschuldige mich dafür, dass dies ein wenig langwierig ist, aber ich gehe von diesem Projekt zum nächsten hin und her, also möchte ich dieses kleine Ding erledigen. Vielen Dank im Voraus für Ihre Zeit, es wird sehr geschätzt. Grüße

Anstatt zu verwenden background-image, können Sie imgdirekt verwenden und versuchen, das Bild über die gesamte Breite des Ansichtsfensters zu verteilenmax-width:100%; und verwenden Sie bitte keine Auffüllungen oder Ränder auf Ihr Hauptcontainer-Div, da dies die Gesamtbreite des Containers erhöht. Mit dieser Regel können Sie eine Bildbreite haben, die der Breite des Browsers entspricht, und die Höhe ändert sich auch entsprechend dem Seitenverhältnis. Vielen Dank.

Bearbeiten: Ändern des Bildes in verschiedenen Fenstergrößen

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

Auf diese Weise ändern Sie Ihr Bild in einer anderen Größe des Browsers.

Tim S. war einer "richtigen" Antwort viel näher als der derzeit akzeptierten. Wenn Sie ein Hintergrundbild mit 100% Breite und variabler Höhe mit CSS erstellen möchten, anstatt zu verwenden cover(wodurch sich das Bild von den Seiten ausdehnen kann) oder contain(wodurch sich das Bild überhaupt nicht ausdehnen kann), einfach Stellen Sie das CSS so ein:

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

Dadurch wird Ihr Hintergrundbild auf 100% Breite eingestellt und die Höhe kann überlaufen. Jetzt können Sie Medienabfragen verwenden, um dieses Bild auszutauschen, anstatt sich auf JavaScript zu verlassen.

EDIT: Ich habe gerade (3 Monate später) festgestellt, dass Sie wahrscheinlich nicht möchten, dass das Bild überläuft. Sie möchten anscheinend, dass die Größe des Containerelements basierend auf dem Hintergrundbild geändert wird (um das Seitenverhältnis beizubehalten), was meines Wissens mit CSS nicht möglich ist.

Hoffentlich können Sie bald das neue srcset- Attribut für das imgElement verwenden. Wenn Sie imgjetzt Elemente verwenden möchten , ist die derzeit akzeptierte Antwort wahrscheinlich die beste.

Sie können jedoch ein reines Hintergrundbildelement mit einem konstanten Seitenverhältnis mit reinem CSS erstellen. Dazu setzen Sie den Wert heightauf 0 und den padding-bottomProzentsatz auf die eigene Breite des Elements wie folgt:

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Um unterschiedliche Seitenverhältnisse zu verwenden, teilen Sie die Höhe des Originalbilds durch die eigene Breite und multiplizieren Sie sie mit 100, um den Prozentwert zu erhalten. Dies funktioniert, da der Polsterungsprozentsatz immer basierend auf der Breite berechnet wird, auch wenn es sich um eine vertikale Polsterung handelt.

Versuche dies

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Vereinfachte Version

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

Sie können die CSS-Eigenschaft verwenden background-sizeund auf coveroder setzencontain je nach Wunsch . Durch das Abdecken wird das Fenster vollständig abgedeckt, während durch das Einschließen eine Seite in das Fenster passt, sodass nicht die gesamte Seite abgedeckt wird (es sei denn, das Seitenverhältnis des Bildschirms entspricht dem Bild).

Bitte beachten Sie, dass dies eine CSS3-Eigenschaft ist. In älteren Browsern wird diese Eigenschaft ignoriert. Alternativ können Sie Javascript verwenden, um die CSS-Einstellungen abhängig von der Fenstergröße zu ändern. Dies wird jedoch nicht bevorzugt.

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

Verwenden Sie einfach ein zweifarbiges Hintergrundbild:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

Fügen Sie die CSS hinzu:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

Und HTML ist:

<div class="bg-mg"></div>

CSS: Hintergrundbild auf 100% Breite und Höhe des Bildschirms strecken?

Es ist 2017, und jetzt können Sie die Objektanpassung verwenden, die eine angemessene Unterstützung bietet . Es funktioniert auf die gleiche Weise wie ein Div, background-sizejedoch auf dem Element selbst und auf jedem Element, einschließlich Bildern.

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}