Wie bekomme ich mein header-Bild zu füllen, die Breite unter Beibehaltung gleicher Höhe und Seitenverhältnis?

Ich habe ein header-Bild, das 1358 × 218. Auf größeren Bildschirmen, es passt nicht der Breite des Bildschirms. Ich will Sie um das Bild zu skalieren, halten Sie das Seitenverhältnis, so dass die Breite immer erfüllt 100% der Breite des Browsers. Hier ist der code, den ich derzeit habe:

http://jsfiddle.net/qD5n5/

Wie kann ich das erreichen?

InformationsquelleAutor Andrew | 2012-10-14
  1. 1

    Auf modernen Browsern (IE >= 9 und andere Browser) können Sie background-size: cover. Sonst würden Sie sich ändern müssen, das markup, eventuell durch die Anzeige das Bild mit einem <img> - tag anstelle eines CSS-hintergrund.

    InformationsquelleAutor Jon
  2. 1

    Können Sie nicht ändern Sie hintergrund-Bild-Größe. Sie müsste es wie folgt:

    <div id="header" style="oveflow: hidden; height: 50px /*your fixed height*/">
  <img src="background.jpg" style="max-width: 100%" />
</div>

    diese Strecken das Bild in die 100% halten Sie das Seitenverhältnis und das overflow: hidden, lassen wir Sie halten eine Feste Höhe.

    hier das fiddle: http://jsfiddle.net/kumiau/qD5n5/1/

    • das klappt nicht , es wird abgeschnitten Teil des Bildes
    • Sie können entfernen Sie overflow:hidden, aber in diesem Fall die Höhe nicht immer der gleiche sein wie der Titel der Frage vermuten ist erforderlich.
    InformationsquelleAutor kumiau
  3. -1

    entfernen Sie einfach die Höhe , wenn Sie die Breite und keine Höhe , die broswer wird keep aspect ration

      #header {
    background-image:url('http://i.imgur.com/RvQdH.jpg');
    width:100%;        
    margin-left:auto;
    margin-right:auto;
    background-position:center;
    background-repeat:no-repeat;
   }​

    verwenden Sie diese css-Einstellungen für die eigentliche <img> tag , nicht ein div für den browser, um die Größe richtig

    • Nein, das wird nicht funktionieren. Haben Sie versucht, mit einer wirklich breiten Fenster?
    • bearbeitet , es wird Arbeit für img-tag
    InformationsquelleAutor Scott Selby
Schreibe einen Kommentar