Gambar latar lebar 100% dengan tinggi 'otomatis'

Saat ini saya sedang mengerjakan halaman arahan seluler untuk sebuah perusahaan. Ini adalah tata letak yang sangat dasar tetapi di bawah tajuk ada gambar produk yang akan selalu lebarnya 100% (desain menunjukkannya selalu dari ujung ke ujung). Tergantung pada lebar layar, tinggi gambar akan secara jelas menyesuaikan. Saya awalnya melakukan ini dengan img (dengan lebar CSS 100%) dan itu berfungsi dengan baik tetapi saya menyadari bahwa saya ingin menggunakan kueri media untuk menyajikan gambar yang berbeda berdasarkan resolusi yang berbeda - katakanlah kecil, sedang dan versi besar dari gambar yang sama, misalnya. Saya tahu Anda tidak dapat mengubah img src dengan CSS jadi saya pikir saya harus menggunakan latar belakang CSS untuk gambar sebagai lawan dari tag img di HTML.

Saya tidak bisa mendapatkan ini berfungsi dengan baik karena div dengan gambar latar belakang membutuhkan lebar dan tinggi untuk menampilkan latar belakang. Saya jelas bisa menggunakan 'width: 100%' tapi apa yang saya gunakan untuk tingginya? Saya dapat menempatkan tinggi tetap acak seperti 150px dan kemudian saya dapat melihat 150px teratas dari gambar tetapi ini bukan solusi karena tidak ada ketinggian yang tetap. Saya telah bermain dan menemukan bahwa setelah ada ketinggian (diuji dengan 150px) saya dapat menggunakan 'background-size: 100%' agar sesuai dengan gambar di div dengan benar. Saya dapat menggunakan CSS3 yang lebih baru untuk proyek ini karena ditujukan hanya untuk seluler.

Saya telah menambahkan contoh kasar di bawah ini. Mohon maaf atas gaya sebaris tetapi saya ingin memberikan contoh dasar untuk mencoba dan membuat pertanyaan saya sedikit lebih jelas.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Apakah saya mungkin harus memberikan div kontainer sebuah persentase tinggi berdasarkan keseluruhan halaman atau apakah saya melihat ini sepenuhnya salah?

Juga, menurut Anda apakah latar belakang CSS adalah cara terbaik untuk melakukan ini? Mungkin ada teknik yang menyajikan tag img berbeda berdasarkan perangkat / lebar layar. Ide umumnya adalah bahwa template halaman arahan akan digunakan berkali-kali dengan gambar produk yang berbeda jadi saya perlu memastikan bahwa saya mengembangkan ini dengan cara terbaik.

Saya minta maaf jika ini sedikit bertele-tele tetapi saya bolak-balik dari proyek ini ke proyek berikutnya jadi saya ingin menyelesaikan hal kecil ini. Terima kasih sebelumnya atas waktu Anda, ini sangat kami hargai. Salam

Alih-alih menggunakan, background-imageAnda dapat menggunakan imgsecara langsung dan untuk mendapatkan gambar menyebar semua lebar viewport coba gunakan max-width:100%;dan harap diingat jangan menerapkan padding atau margin apa pun ke div wadah utama Anda karena mereka akan menambah lebar total wadah. Dengan menggunakan aturan ini, Anda dapat memiliki lebar gambar yang sama dengan lebar browser dan tingginya juga akan berubah sesuai dengan rasio aspek. Terima kasih.

Edit: Mengubah gambar pada ukuran jendela yang berbeda

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

Dengan cara ini Anda mengubah gambar Anda dalam berbagai ukuran browser.

Tim S. lebih dekat dengan jawaban yang "benar" daripada jawaban yang diterima saat ini. Jika Anda ingin memiliki lebar 100%, gambar latar belakang tinggi variabel dilakukan dengan CSS, alih-alih menggunakan cover(yang akan memungkinkan gambar memanjang dari samping) atau contain(yang tidak memungkinkan gambar untuk memanjang sama sekali), cukup atur CSS seperti ini:

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

Ini akan mengatur gambar latar belakang Anda menjadi 100% lebar dan memungkinkan tingginya meluap. Sekarang Anda dapat menggunakan kueri media untuk menukar gambar tersebut alih-alih mengandalkan JavaScript.

EDIT: Saya baru menyadari (3 bulan kemudian) bahwa Anda mungkin tidak ingin gambar meluap; Anda tampaknya ingin elemen penampung diubah ukurannya berdasarkan gambar latar belakangnya (untuk mempertahankan rasio aspeknya), yang sejauh yang saya tahu tidak mungkin dilakukan dengan CSS.

Semoga Anda segera dapat menggunakan atribut srcset baru pada imgelemen tersebut. Jika Anda ingin menggunakan imgelemen sekarang, jawaban yang diterima saat ini mungkin yang terbaik.

Namun, Anda dapat membuat elemen gambar latar yang responsif dengan rasio aspek konstan menggunakan CSS murni. Untuk melakukan ini, Anda menyetel heightke 0 dan menyetel padding-bottompersentase dari lebar elemen itu sendiri, seperti ini:

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Untuk menggunakan rasio aspek yang berbeda, bagi tinggi gambar asli dengan lebarnya sendiri, dan kalikan dengan 100 untuk mendapatkan nilai persentase. Ini berfungsi karena persentase padding selalu dihitung berdasarkan lebar, meskipun padding vertikal.

Coba ini

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

Versi yang disederhanakan

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

Anda dapat menggunakan properti CSS background-sizedan mengaturnya ke coveratau contain, tergantung preferensi Anda. Cover akan menutupi seluruh jendela, sedangkan berisi akan membuat satu sisi sesuai dengan jendela sehingga tidak menutupi seluruh halaman (kecuali aspek rasio layar sama dengan gambar).

Harap diperhatikan bahwa ini adalah properti CSS3. Di browser lama, properti ini diabaikan. Sebagai alternatif, Anda dapat menggunakan javascript untuk mengubah pengaturan CSS tergantung pada ukuran jendela, tetapi ini tidak disukai.

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

Cukup gunakan gambar latar dua warna:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

Tambahkan css:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

Dan html adalah:

<div class="bg-mg"></div>

CSS: meregangkan gambar latar menjadi 100% lebar dan tinggi layar?

Ini 2017, dan sekarang Anda dapat menggunakan objek-fit yang memiliki dukungan yang layak . Ia bekerja dengan cara yang sama seperti div background-sizetetapi pada elemen itu sendiri, dan pada elemen apa pun termasuk gambar.

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}