it-swarm.dev

CSS, aby obrazy zmieniały rozmiar i pasowały do ​​tego samego ekranu

Pracowałem ze stroną tymczasową w http://www.flywavez.com ale nie mogę zmienić rozmiaru obrazu i być taki sam we wszystkich rozdzielczościach ekranu. Na iPhonie odcina dziewczynę przed talią i doskonale pasuje, gdy oglądam ją na moim 19-calowym ekranie laptopa z rezystancją 1366 x 768, a nawet gdy podałem wideo do mojego 55-calowego telewizora przez VGA z laptopa. Jednak gdy oglądam na większych monitorach z większą rozdzielczością, jest duża przestrzeń i oczywisty widok, gdzie kończy się rozmiar obrazu. Myślałem, że zmieniłem rozmiar CSS za pomocą /* Krajobraz tabletu */ Ekran @media i (max-width: 1060px) { #wrapper {szerokość: 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%; }
    }

Chcę, aby ten obraz był wyświetlany we wszystkich rozdzielczościach, tak jak w przypadku modelu 1366 x 768.

Dzięki za pomoc.

12
abtecas

Myślę, że zasadniczo niemożliwe jest osiągnięcie tego, co próbujesz zrobić bez utraty współczynnika obrazu, co jest prawdopodobnie niepożądane. Czy rozważałeś użycie właściwości „background-size”? Poniższe css daje całkiem niezły wygląd:

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

Możesz go zobaczyć tutaj: http://jsfiddle.net/DTN54/

24
onestepcreative

cover To słowo kluczowe określa, że ​​obraz tła powinien być skalowany tak, aby był jak najmniejszy, zapewniając jednocześnie, że oba jego wymiary są większe lub równe odpowiednim wymiarom obszaru pozycjonowania tła.

include To słowo kluczowe określa, że ​​obraz tła powinien być skalowany tak, aby był jak największy, zapewniając jednocześnie, że oba jego wymiary są mniejsze lub równe odpowiednim wymiarom obszaru pozycjonowania tła. Więc spróbuj użyć zawierają zamiast okładki

100% Skaluje się w 100% do wysokości i szerokości bez przycinania.

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

Zasadniczo to wszystko, czego potrzebujesz:

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