Hintergrund-Größe: Cover funktioniert nicht im Portrait auf Android Tablet

Ich bin mit der background-size Eigenschaft für eine volle Breite und Höhe Hintergrundbild aber mit Schwierigkeiten bekommen es vollständig in Chrome auf einem Nexus7 Tablette in Portrait-Ansicht zu decken. Es deckt nur die Breite und nicht die Höhe, dh es gibt etwa 200px Leerraum darunter. Allerdings, wenn ich die Website in Desktop-Chrome (oder irgendetwas anderes) und auf einem vertikalen Monitor zu emulieren Porträt Dimensionen, es deckt kein Problem.

Wer hat eine Lösung?

  • AccountManager ohne SyncAdapter?
  • So reduzieren Sie eine Bilddateigröße, bevor Sie auf einen Server hochladen
  • Wie man android unbestimmte ProgressBar Farbe ändert?
  • NullPointerException in FrameLayout.onMeasure ()
  • SPH-L710 (Sprint Galaxy S III) läuft 4.4.2 misreports xdpi und ydpi
  • OKHTTP 3 Tracking Multipart Upload Fortschritte
  • CSS:

     html { background: url(/images/post_bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')"; } 

    Porträtbildschirm:

  • Wie konzentriere ich mich auf den Standort auf Google Maps, wenn man bedenkt, dass eine Ansicht darüber steht?
  • DexIndexOverflowException: Kann den neuen Index 65772 nicht in einen Nicht-Jumbo-Befehl verschmelzen !: Jumbo-Modus? Und / oder Multi-Dex? Was steht hinter der Szene?
  • Android - Holen Sie sich nur eine Zeit
  • Fehler beim Verwenden von notifyDataSetChanged im android array adapter
  • Google plus Client "Ein interner Fehler aufgetreten"
  • SpannbareString mit Bildbeispiel
  • 7 Solutions collect form web for “Hintergrund-Größe: Cover funktioniert nicht im Portrait auf Android Tablet”

    Ich glaube, Sie können es beheben, indem Sie die Höhe der HTML- und Body-Tags im CSS definieren, so wie:

     html{ height:100%; min-height:100%; } body{ min-height:100%; } 

    hoffe das hilft

    Ich weiß, es ist schon lange her, seit die Frage gestellt wurde, aber ich habe gerade die Antwort gefunden, die ich denke. Für mich Hintergrund-Größe: Cover funktioniert in Android Browser und Android Chrome, wenn Sie die "feste" im Hintergrund CSS-Anweisung weglassen. Nach einigen Tests, es funktioniert für mich das Bild den Hintergrund eines DIV:

     #yourDivSelectorHere { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; background-image: url(/img/backgrounds/1.jpg) ; background-repeat:no-repeat; background-position: center center; /* background-attachment: fixed; removed for Android */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; 

    }

    Der DIV ist selbst fixiert (im Gegensatz zum Hintergrundbild), ist 100% breit und höhe und steht auf der Rückseite von allem. Es ist ein bisschen zusätzliche Anstrengung im Gegensatz zu nur das Hinzufügen des Hintergrundbildes zu HTML oder KÖRPER, aber für mich funktioniert es auf allen Browsern, die ich bisher getestet habe (FF, Chrome, IE8, IE9, Safari), auf iPad2 und Android Chrome und Android-Browser

    Ich stelle die Lösung zur Verfügung, die ich gefunden habe, falls jemand in die Zukunft kommt. Anstatt ein Hintergrundbild zu verwenden, habe ich ein <img> :

    HTML:

     <img id="full_bg" src="/images/post_bg.jpg" alt="Post your project on CustomMade"> 

    CSS:

     #full_bg { height: auto; left: 0; min-height: 100%; min-width: 1024px; position: fixed; top: 0; width: 100%; } @media screen and (max-width: 1024px) { #full_bg { left: 50%; margin-left: -512px; } } 

    Das funktionierte Cross-Browser und auf mobilen Geräten. Ich habe die lösung hier gefunden

    Nun, ich kann mit einer anderen Lösung kommen: Ich habe es dem Körper hinzugefügt und alles, was Sie brauchen, um zu kümmern ist, dass die Hintergrund-Anhang: fix ist die letzte Regel:

    Werke:

     body { height:100%; width:100%; background-size:cover; background-repeat:no-repeat; background-position: center center; background-attachment:fixed; } 

    Funktioniert nicht:

     body { height:100%; width:100%; background-size:cover; background-attachment:fixed; background-repeat:no-repeat; background-position: center center; } 

    Es ist wirklich ein Pitty, dass die Telefonbrowser sind im Allgemeinen ein bisschen buggy …

    Verwenden Sie HTML-Hintergrund statt Körper und geben Sie eine 'Höhe: 100%'

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

    Ich habe herausgefunden, andere Lösungen mit ein bisschen jquery Zeug. Das Fix basiert auf der Annahme, dass wir ein Bild in der Landschaftsdimension / dem Verhältnis für den Hintergrund verwenden.

    Schritt 1: Vergleich der "Fensterhöhe" und "Seiteninhaltshöhe"

    Step2: Wenn "Fensterhöhe" kleiner ist als "Seiteninhaltshöhe"

    Schritt 3: Wenden Sie dies auf Body-Tag an

    HTML {

     <body style="background-size: auto 'page content height'; background-attachment: scroll;"> 

    }

    Skript

     var wHeight = $(window).height(); var bodyHeight = $('page-content-element').height(); if(wHeight < bodyHeight){ $('body').attr('style', 'background-size: auto '+ (bodyHeight*1.1) +'px;background-attachment: scroll;'); } else{ $('body').removeAttr('style'); } 

    Nennen Sie diese auf Seite laden und Fenstergröße ändern

    Diese Lösung hat für mich auch für Android gearbeitet

     html{ height:100%; min-height:100%; } body{ min-height:100%; } 
    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.