webentwicklung-frage-antwort-db.com.de

CSS, um die Größe der Bilder und die Anpassung an jeden Bildschirm gleich zu gestalten

Ich habe mit einer temporären Seite unter http://www.flywavez.com gearbeitet, aber ich kann nicht die Größe des Bildes ändern und in allen Bildschirmauflösungen gleich sein. Auf dem iPhone schneidet es das Mädchen vor der Taille ab, und es passt perfekt, wenn es auf meinem 19-Zoll-Laptopbildschirm mit der Auflösung bei 1366 x 768 angezeigt wird, und sogar wenn ich das Video über meinen VGA über meinen VGA auf meinen 55-Zoll-Fernseher eingespeist habe. Wenn ich jedoch größere Monitore mit höherer Auflösung ansehe, gibt es einen großen Raum und eine offensichtliche Ansicht, wo die Bildgröße endet. Ich dachte, ich hätte CSS mit /* Tablet-Landschaft */ @media screen und (max-width: 1060px) { #wrapper {width: 67%; } }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

    /* Tabled Portrait */
    @media screen and (max-width: 768px) {
        #wrapper { width:100%; }
     }

     /* iphone */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
        img { max-width: 100%; }
    }

    /* ipad */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
    }

Ich möchte, dass dieses Bild in allen Auflösungen angezeigt wird, wie es auf der 1366 x 768 zu sehen ist.

Danke für jede Hilfe.

12
abtecas

Ich denke, es ist grundsätzlich unmöglich, das zu erreichen, was Sie versuchen, ohne das Bildverhältnis zu verlieren, was wahrscheinlich unerwünscht ist. Haben Sie überlegt, die Eigenschaft 'Hintergrundgröße' zu verwenden? Die folgende CSS erzielt ein ziemlich gutes Aussehen:

body {
    background: url('images/example.jpg') no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Sie können es hier sehen: http://jsfiddle.net/DTN54/

24
onestepcreative

cover Dieses Schlüsselwort gibt an, dass das Hintergrundbild so skaliert werden sollte, dass es so klein wie möglich ist, wobei sichergestellt werden muss, dass beide Abmessungen größer oder gleich den entsprechenden Abmessungen des Hintergrundpositionierungsbereichs sind.

dieses Schlüsselwort gibt an, dass das Hintergrundbild so groß wie möglich skaliert werden soll, wobei sichergestellt werden muss, dass beide Dimensionen kleiner oder gleich den entsprechenden Dimensionen des Hintergrundpositionierungsbereichs sind. Versuchen Sie es also, anstatt Deckung zu verwenden

100% Dies wird zu 100% in Höhe und Breite skaliert, ohne zu beschneiden.

body {
        background: url('images/example.jpg') no-repeat fixed;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
6
Riya Travel

Im Grunde ist dies alles, was Sie brauchen:

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}
0
ene sorin