Gambar latar lebar 100% dengan tinggi 'otomatis'


90

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


Peramban dapat memilih untuk tidak mengunduh sumber gambar jika memiliki tampilan: tidak ada, jadi Anda selalu dapat menampilkan gambar yang berbeda dengan kueri media tanpa JS
Ben Taliadoros

Jawaban:


18

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.


Terima kasih telah meluangkan waktu untuk melakukan ini untuk saya, ini sangat dihargai. Saya hanya mencobanya dengan cepat dan tampaknya berhasil.
Darryl Young

2
Jawaban lama ini terlihat menarik ... tetapi bukankah benar bahwa browser seluler akan tetap mengunduh (hanya tidak menampilkan) gambar yang awalnya ditetapkan dalam HTML sebagai src? Jika demikian, itu bukan permulaan, karena intinya adalah menghemat sumber daya perangkat seluler.
Tim Gallant

1
Saya yakin Tim Gallant benar dalam hal ini - dalam hal ini browser akan memuat kedua gambar sebagai sumber daya dan kemudian hanya menampilkan gambar yang beresolusi lebih rendah. Jadi meskipun ini tampak menarik, di seluler sebenarnya lebih lambat daripada memuat hanya yang beresolusi tinggi dan dengan pengorbanan itu Anda hanya akan melihat gambar beresolusi lebih rendah ... terburuk dari kedua dunia.
pria kecil kecil

1
Jawaban yang buruk. Suara negatif. Cukup kembung dan kode lama.
TheBlackBenzKid

Sisipkan kueri media yang menambahkan display: tidak ada pada gambar yang tidak ingin Anda tampilkan - kebanyakan browser tidak akan mengunduhnya
Ben Taliadoros

215

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.


4
sempurna, pencarian google cepat membawa saya ke sini, masalah terpecahkan!
J King

6
Jawaban seperti ini haruslah yang diterima, mereka menjawab pertanyaan itu. Tentu memberikan "solusi terbaik" tetapi juga menjawab pertanyaannya, maka ketika orang menemukannya, mereka akan mendapatkan jawaban yang mereka inginkan!
pembuat waktu

Ini tidak berhasil untuk saya, saya menggunakan Google Chrome 47.0. Mungkinkah karena jawabannya sudah ketinggalan zaman?
MeV

Bisakah Anda lebih spesifik tentang bagian mana yang tidak berfungsi? Saya memberikan beberapa kemungkinan jawaban, jadi jika satu bagian tidak berfungsi saya dapat menjelaskan lebih lanjut untuk memberikan jawaban yang lebih baik dan lebih terkini.
cr0ybot

untuk beberapa alasan yang tidak jelas, pengaturan background-size: automemecahkan masalah saya pada semua orientasi perangkat.
n__o

17

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;
}

16

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 */
}

4

Cukup gunakan gambar latar dua warna:

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


2

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;
}

1
html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.