Gambar latar belakang CSS agar sesuai lebar, tinggi harus skala otomatis dalam proporsi

saya sudah

body {
    background: url(images/background.svg);
}

Efek yang diinginkan adalah bahwa gambar latar belakang ini akan memiliki lebar sama dengan halaman, tinggi berubah untuk mempertahankan proporsi. mis. jika gambar aslinya berukuran 100 * 200 (unit apa saja) dan lebar badan 600px, gambar latar belakang harus setinggi 1200px. Ketinggian harus berubah secara otomatis jika ukuran jendela diubah. Apakah ini mungkin?

Saat ini, Firefox sepertinya membuat ketinggian pas dan kemudian menyesuaikan lebarnya. Apakah ini mungkin karena ketinggiannya adalah dimensi terpanjang dan ia berusaha menghindari tanam? Saya ingin memotong secara vertikal, lalu gulir: tidak ada pengulangan horizontal.

Juga, Chrome menempatkan gambar di tengah, tanpa pengulangan, bahkan ketika background-repeat:repeatdiberikan secara eksplisit, yang merupakan defaultnya.

Ada properti CSS3 untuk ini, yaitu background-size( pemeriksaan kompatibilitas ). Meskipun seseorang dapat menetapkan nilai panjang, biasanya digunakan dengan nilai khusus containdan cover. Dalam kasus spesifik Anda, Anda harus menggunakan cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Eggsplanation untuk containdancover

Maaf untuk permainan kata yang buruk, tapi saya akan menggunakan gambar hari ini oleh Biswarup Ganguly untuk demonstrasi. Katakanlah bahwa ini adalah layar Anda, dan area abu-abu berada di luar layar Anda yang terlihat. Untuk demonstrasi, saya akan mengasumsikan rasio 16x9.

Kami ingin menggunakan gambar hari itu sebagai latar belakang. Namun, kami memangkas gambar menjadi 4x3 karena beberapa alasan. Kami dapat mengatur background-sizeproperti ke beberapa panjang tetap, tetapi kami akan fokus pada containdan cover. Perhatikan bahwa saya juga berasumsi bahwa kami tidak memotong lebar dan / atau tinggi body.

contain

contain

Skala gambar, sambil mempertahankan rasio aspek intrinsiknya (jika ada), ke ukuran terbesar sehingga lebar dan tingginya dapat masuk ke dalam area penentuan posisi latar belakang.

Ini memastikan bahwa gambar latar belakang selalu benar-benar terkandung dalam area penentuan posisi latar belakang, namun, mungkin ada beberapa ruang kosong yang diisi dengan Anda background-colordalam hal ini:

cover

cover

Skala gambar, sambil mempertahankan rasio aspek intrinsiknya (jika ada), dengan ukuran terkecil sehingga lebar dan tingginya dapat sepenuhnya menutupi area penentuan posisi latar belakang.

Ini memastikan bahwa gambar latar belakang menutupi segalanya. Tidak akan terlihat background-color, namun tergantung pada rasio layar sebagian besar gambar Anda dapat terpotong:

Demonstrasi dengan kode aktual

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Berdasarkan tips dari https://developer.mozilla.org/en-US/docs/CSS/background-size Saya berakhir dengan resep berikut yang bekerja untuk saya

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Saya tidak yakin apa yang Anda cari sebenarnya, tetapi Anda benar-benar harus memeriksa posting blog yang sangat bagus ini yang ditulis oleh Chris Coyier dari CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Baca deskripsi untuk masing-masing artikel dan lihat apakah itu yang Anda cari.

Yang pertama menjawab pertanyaan berikut:

Apakah ada cara untuk membuat gambar latar belakang dapat diubah ukurannya? Seperti dalam, isi latar belakang halaman-ke-tepi halaman dengan gambar, tidak peduli ukuran jendela browser. Juga, minta ukurannya lebih besar atau lebih kecil saat jendela browser berubah. Juga, pastikan itu mempertahankan rasio (tidak meregang aneh). Juga, tidak menyebabkan scrollbar, hanya memotong secara vertikal jika perlu. Juga, masuk pada halaman sebagai tag inline.

Sasaran posting kedua adalah untuk mendapatkan yang berikut, "gambar latar belakang pada situs web yang mencakup seluruh jendela browser setiap saat."

Semoga ini membantu.

Gambar latar belakang tidak disetel Sempurna maka css-nya bermasalah buat jadi file css-nya berubah menjadi kode di bawah ini

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; ukuran latar belakang: 100% 100%; "

Coba ini,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Cukup tambahkan satu baris ini:

    .your-class {
        height: 100vh;
    }

vh adalah tinggi viewport. Ini secara otomatis akan berskala agar sesuai dengan jendela browser perangkat.

Periksa lebih lanjut di sini: Buat div 100% ketinggian jendela browser

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

Saya memiliki masalah yang sama, tidak dapat mengubah ukuran gambar ketika menyesuaikan dimensi browser.

Kode Buruk:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

Kode yang baik:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

Kuncinya di sini adalah penambahan elemen ini -> ukuran latar: berisi;

Inilah yang bekerja untuk saya:

background-size: auto 100%;

Pengaturan ukuran latar belakang tidak membantu, solusi berikut ini bekerja untuk saya:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

Ini pada dasarnya memotong gambar dan membuatnya cocok, background-size: contain/covermasih tidak membuatnya cocok.