CSS untuk membuat gambar mengubah ukuran dan sesuai dengan layar apa pun yang sama

Saya telah bekerja dengan halaman sementara di http://www.flywavez.com tetapi saya tidak bisa membuat gambarnya berubah ukuran dan sama di semua resolusi layar. Di iPhone, gambar tersebut memotong gadis itu sebelum pinggang, dan sangat pas ketika dilihat di layar laptop 19" saya dengan resolusi 1366 x 768, dan bahkan ketika saya memasukkan video ke TV 55" saya melalui VGA dari laptop saya. Namun, ketika saya melihat di monitor yang lebih besar dengan resolusi yang lebih besar, ada ruang besar dan tampilan yang jelas di mana ukuran gambar berakhir. Saya pikir saya telah mengubah ukuran CSS dengan / Tablet Landscape / @media screen and (max-width: 1060px) {

wrapper { lebar: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%; }
    }

Saya ingin gambar ini ditampilkan pada semua resolusi seperti yang terlihat pada 1366 x 768.

Terima kasih atas bantuannya.

Pemrograman
image css responsive-design
1 November 2013 в 3:57
22 tayangan
Larutan

Saya pikir pada dasarnya tidak mungkin untuk mencapai apa yang Anda coba lakukan tanpa kehilangan rasio gambar, yang mungkin tidak diinginkan. Sudahkah Anda mempertimbangkan untuk menggunakan properti 'background-size'? Css di bawah ini menghasilkan tampilan yang cukup bagus:

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

Anda dapat melihatnya di sini: http://jsfiddle.net/DTN54/

Phil
Jawaban edit 22 Agustus 2017 в 2:31
Komentar (2)

cover Kata kunci ini menentukan bahwa gambar latar belakang harus diskalakan sekecil mungkin sambil memastikan kedua dimensinya lebih besar dari atau sama dengan dimensi yang sesuai dari area pemosisian latar belakang.

contain Kata kunci ini menentukan bahwa gambar latar belakang harus diskalakan menjadi sebesar mungkin sambil memastikan kedua dimensinya kurang dari atau sama dengan dimensi yang sesuai dari area pemosisian latar belakang. Jadi, cobalah menggunakan contain alih-alih cover

100% Ini akan menskalakan 100% untuk tinggi dan lebar tanpa pemangkasan apa pun.

body {
        background: url('images/example.jpg') no-repeat fixed;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
0_jump
Jawaban edit 2 November 2017 в 10:37
Komentar (0)

Pada dasarnya, hanya ini yang Anda perlukan:

body {
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}
deChristo
Jawaban edit 13 Desember 2016 в 12:09
Komentar (0)