Hintergrundbild mit 100% Breite und automatischer Höhe

87

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

Darryl Young
quelle
Ein Browser kann sich dafür entscheiden, eine Bildressource nicht herunterzuladen, wenn sie angezeigt wird: keine, so dass Sie immer verschiedene Bilder mit Medienabfragen ohne JS
anzeigen können

Antworten:

15

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.

maksbd19
quelle
Vielen Dank, dass Sie sich die Zeit genommen haben, dies für mich zu tun. Es wird sehr geschätzt. Ich habe es nur kurz ausprobiert und es scheint zu funktionieren.
Darryl Young
2
Diese alte Antwort sah attraktiv aus ... aber stimmt es nicht, dass der mobile Browser das ursprünglich im HTML als src festgelegte Bild weiterhin herunterlädt (nur nicht anzeigt)? Wenn ja, ist dies kein Anfänger, da es darum geht, die Ressourcen des Mobilgeräts zu schonen.
Tim Gallant
1
Ich glaube, Tim Gallant hat Recht - in diesem Fall lädt der Browser beide Bilder als Ressource und zeigt dann nur die Bilder mit niedrigerer Auflösung an. Während dies attraktiv erscheint, ist es auf Mobilgeräten tatsächlich langsamer als das Laden nur der hochauflösenden und mit diesem Opfer sehen Sie nur das Bild mit niedrigerer Auflösung ... das Schlimmste aus beiden Welten.
kleiner winziger Mann
1
Schlechte Antwort. Abgestimmt. Einfach aufgeblähter und alter Code.
TheBlackBenzKid
Fügen Sie Medienabfragen ein, die eine Anzeige hinzufügen: Keine zu den Bildern, die Sie nicht anzeigen möchten - die meisten Browser laden sie nicht herunter
Ben Taliadoros
212

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.

cr0ybot
quelle
4
perfekte, schnelle Google-Suche brachte mich hierher, Problem gelöst!
J King
6
Antworten wie diese sollten akzeptiert werden, sie beantworten die Frage. Geben Sie sicher eine "beste Lösung", aber beantworten Sie auch die Frage, wenn die Leute sie finden, bekommen sie die Antwort, die sie wollen!
tim.baker
Dies funktioniert bei mir nicht, ich verwende Google Chrome 47.0. Kann es sein, dass die Antwort veraltet ist?
MeV
Könnten Sie genauer sagen, welcher Teil nicht funktioniert? Ich habe mehrere mögliche Antworten gegeben. Wenn also ein Teil nicht funktioniert, kann ich weiter darauf eingehen, um eine bessere und aktuellere Antwort zu erhalten.
Cr0ybot
Aus irgendeinem unklaren Grund löste die Einstellung background-size: automein Problem bei allen Geräteorientierungen.
n__o
17

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;
}
Mo.
quelle
16

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 */
}
Tim S.
quelle
4

Verwenden Sie einfach ein zweifarbiges Hintergrundbild:

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

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;
}
Nick
quelle
1
html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}
Mostafa Norzade
quelle