Bagaimana cara mendapatkan tinggi div untuk menyesuaikan otomatis ke ukuran latar belakang?


270

Bagaimana cara mendapatkan div untuk secara otomatis menyesuaikan dengan ukuran latar belakang yang saya set untuk itu tanpa mengatur ketinggian tertentu (atau min-tinggi) untuk itu?

Jawaban:


255

Solusi lain, mungkin tidak efisien, adalah memasukkan gambar di bawah imgelemen yang ditetapkan visibility: hidden;. Kemudian buat background-imagediv di sekitarnya sama seperti gambar.

Ini akan mengatur div sekitarnya ke ukuran gambar dalam imgelemen tetapi menampilkannya sebagai latar belakang.

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

16
tidak terlalu berguna karena gambar akan menggunakan 'spasi' dan konten akan terlihat seperti memiliki margin atas yang besar.
Bart Calixto

35
Mungkin saya melewatkan sesuatu, tetapi jika Anda tetap akan memasukkan imgmarkup Anda, mengapa tidak tidak menyembunyikan yang sebenarnya <img>dan tidak repot dengan yang background-imagebaik? Apa untungnya melakukan hal-hal seperti ini?
Mark Amery

3
Jawaban yang bagus, tetapi bukankah browser harus memuatnya dua kali?
www139

8
@ www139 Ketika Anda mengatakan memuat, apa sebenarnya yang Anda maksud? Setelah gambar diunduh, mungkin di-cache. Sejak saat itu, permintaan lain didasarkan pada salinan lokal. Jadi tidak. Itu tidak diunduh dua kali. Tapi, itu dimuat dua kali.
Tmac

2
@MarkAmery Salah satu hal paling keren background-imageadalah dapat menggunakan mode campuran CSS , sedangkan imgtidak bisa.
Aaron Grey

539

Ada cara yang sangat bagus dan keren untuk membuat gambar latar berfungsi seperti imgelemen sehingga menyesuaikan heightsecara otomatis. Anda perlu tahu gambar widthdan heightrasio. Atur heightwadah ke 0 dan atur padding-toppersentase berdasarkan rasio gambar.

Ini akan terlihat seperti berikut:

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

Anda baru saja mendapatkan gambar latar belakang dengan tinggi otomatis yang akan berfungsi seperti elemen img. Berikut adalah prototipe yang berfungsi (Anda dapat mengubah ukuran dan memeriksa ketinggian div): http://jsfiddle.net/TPEFn/2/


23
Sungguh luar biasa! Hanya untuk generasi mendatang menyaksikan jawaban ini, jika Anda menggunakan kompas (scss), saya membuat mixin dari ini menggunakan fungsi pembantu mereka untuk melakukan perhitungan untuk Anda: @mixin div-same-size-as-background-img($url) { background-image: url($url); background-size: contain; background-repeat: no-repeat; width: 100%; height: 0; padding-top: percentage(image-height($url) / image-width($url)); }
Benjamin K.

20
FYI bagi mereka yang bertanya-tanya, padding-top tidak menciptakan ruang putih karena hanya menambah ketinggian elemen. Gambar adalah gambar latar belakang, sehingga terlihat dengan posisi dan jarak yang tepat. Sangat bodoh kita harus menemukan trik seperti ini untuk CSS.
ahnbizcad

9
Sayangnya, padding-top tidak memungkinkan Anda untuk meletakkan apapun di div, seperti elemen form di latar belakang.
Gary Hayes

14
@ GaryHayes Anda dapat mengatur position:relativediv dan meletakkan div lain di dalam dengan position:absolute; top:0; bottom:0; left:0; right:0;set
lexith

17
Meskipun metode ini berfungsi untuk menampilkan gambar latar belakang, metode ini membuat div itu sendiri kurang bermanfaat dengan mengisinya dengan padding. Kryptik menyarankan menambahkan div yang benar-benar diposisikan di dalam wadah, tetapi lalu mengapa repot-repot dengan gambar latar belakang? Anda kemudian dapat menggunakan gambar yang sebenarnya di div konten jika Anda hanya akan memposisikan segalanya di atasnya. Ini mengalahkan tujuan menggunakan gambar latar belakang di tempat pertama.
paulmz

35

Tidak ada cara untuk secara otomatis menyesuaikan ukuran gambar latar belakang menggunakan CSS.

Anda dapat meretasnya dengan mengukur gambar latar belakang di server dan kemudian menerapkan atribut-atribut tersebut ke div, seperti yang telah disebutkan orang lain.

Anda juga dapat meretas beberapa javascript untuk mengubah ukuran div berdasarkan ukuran gambar (setelah gambar diunduh) - ini pada dasarnya adalah hal yang sama.

Jika Anda perlu div Anda untuk menyesuaikan gambar secara otomatis, saya mungkin bertanya mengapa Anda tidak menaruh <img>tag saja di dalam div Anda?


Terima kasih - tetapi saya membutuhkannya sebagai latar belakang sehingga trik gambar tidak akan melakukannya. Saya kira saya akan meretas beberapa javascript seperti yang Anda katakan skenario terburuk tetapi mungkin tidak sepadan.
JohnIdol

3
^^ Itu mungkin bukan ide yang bagus. Peramban mungkin memerlukan beberapa detik sebelum gambar Anda diunduh, dan Anda tidak dapat mengukurnya sampai saat itu, sehingga div Anda akan nongkrong di ukuran yang salah untuk beberapa waktu!
Orion Edwards

1
Dia bisa menjalankan JavaScript ketika dokumen sudah siap.
Scott Tesler

1
Anda tidak dapat mengubah srcsuatu imgdengan pertanyaan media, tetapi Anda dapat mengubah file yang digunakan sebagai gambar latar belakang dengan pertanyaan media.
Scott Marcus

21

Jawaban ini mirip dengan yang lain, tetapi secara keseluruhan yang terbaik untuk sebagian besar aplikasi. Anda perlu mengetahui ukuran gambar sebelum tangan yang biasanya Anda lakukan. Ini akan memungkinkan Anda menambahkan teks overlay, judul, dll tanpa bantalan negatif atau posisi absolut gambar. Kuncinya adalah mengatur padding% agar sesuai dengan rasio aspek gambar seperti yang terlihat pada contoh di bawah ini. Saya menggunakan jawaban ini dan pada dasarnya hanya menambahkan latar belakang gambar.

.wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  background-size: contain;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
  margin: 0 auto;
}
.wrapper:after {
  padding-top: 75%;
  /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}
<div class="wrapper">
  <div class="main">
    This is where your overlay content goes, titles, text, buttons, etc.
  </div>
</div>


2
-1 untuk penggunaan! Important - dan menautkan ke jawaban lain. Silakan mempertimbangkan menyalin di kode yang relevan dari jawaban lain (dengan atribusi) saya sehingga yang ini lebih lengkap, dan memetikan membusuk tautan.
totallyNotLizards

@jammypeach apakah ini lebih baik?
horsejockey

1
@horsejockey kecuali saya kehilangan sesuatu ini tidak skala gambar. Itu hanya topeng itu.
dwkns

@ dwkns Anehnya semua panggilan latar belakang harus dalam satu elemen. Saya menemukan itu memotong ketika saya menentukan "background: url ()" pada id tertentu dan "background-size: berisi" di kelas umum.
Nathan Williams

@dwkns Pembaruan: Saya dapat memperbaiki masalah itu dengan menggunakan "background-image: url ()" bukannya "background: url ()".
Nathan Williams

15

Mungkin ini bisa membantu, itu bukan latar belakang, tetapi Anda mendapatkan ide:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

tolong jelaskan mengapa Anda mempertahankan posisi img sebagai relatif?
Divyanshu Jimmy

1
Mungkin karena float: left;posisinya rusak
Isaac

12

Cukup yakin ini tidak akan pernah terlihat di sini. Tetapi jika masalah Anda sama dengan masalah saya, ini adalah solusi saya:

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

Saya ingin memiliki div di tengah gambar, dan ini akan memungkinkan saya untuk itu.


9

Ada solusi CSS murni yang tidak dijawab oleh jawaban lain.

Properti "content:" sebagian besar digunakan untuk menyisipkan konten teks ke dalam elemen, tetapi juga dapat digunakan untuk menyisipkan konten gambar.

.my-div:before {
    content: url("image.png");
}

Ini akan menyebabkan div untuk mengubah ukuran tingginya menjadi ukuran piksel aktual dari gambar. Untuk mengubah ukuran lebar juga, tambahkan:

.my-div {
    display: inline-block;
}

1
Saya suka solusi ini, tetapi ketika browser dibuat lebih kecil ada banyak ruang putih yang tersisa di bawah gambar header yang diatur untuk responsif.
MG1

6

Anda dapat melakukannya dari sisi server: dengan mengukur gambar dan kemudian mengatur ukuran div, ATAU memuat gambar dengan JS, baca atributnya dan kemudian atur ukuran DIV.

Dan ini sebuah ide, letakkan gambar yang sama di dalam div sebagai tag IMG, tetapi berikan visibilitas: hidden + play with position relative + berikan div gambar ini sebagai latar belakang.


lol mengapa memerlukan sisi server? Seharusnya bisa diimplementasikan dengan CSS.
GTHell

1
@Terima kasih hahaha - periksa tahun yang saya jawab
Itay Moav -Malimovka

@ ItayMoav-Malimovka hehe, tidak memperhatikan itu.
GTHell

5

Saya memiliki masalah ini dan menemukan jawaban Hasanavi tetapi saya mendapat sedikit bug ketika menampilkan gambar latar belakang pada layar lebar - Gambar latar belakang tidak menyebar ke seluruh lebar layar.

Jadi di sini adalah solusi saya - berdasarkan kode Hasanavi tetapi lebih baik ... dan ini harus bekerja pada layar ekstra-lebar dan seluler.

/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) { 
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

Seperti yang mungkin Anda perhatikan, background-size: contain;properti doas tidak pas di layar ekstra lebar, dan background-size: cover;properti tidak cocok di layar seluler jadi saya menggunakan @mediaatribut ini untuk bermain-main dengan ukuran layar dan memperbaiki masalah ini.


3

Bagaimana dengan ini :)

.fixed-centered-covers-entire-page{
    margin:auto;
    background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
    background-repeat: no-repeat;background-size:cover;
    background-position: 50%;
    background-color: #fff;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
    position:fixed;
}
<div class="fixed-centered-covers-entire-page"></div>

Demo: http://jsfiddle.net/josephmcasey/KhPaF/


3

Jika itu adalah gambar latar tunggal yang telah ditentukan sebelumnya dan Anda ingin div untuk menjadi responsif tanpa mendistorsi rasio aspek dari gambar latar belakang, Anda dapat terlebih dahulu menghitung rasio aspek gambar dan kemudian membuat sebuah div yang mempertahankan aspek rasio itu dengan melakukan hal berikut :

Katakanlah Anda menginginkan rasio aspek 4/1 dan lebar div adalah 32%:

div {
  width: 32%; 
  padding-bottom: 8%; 
}

Ini hasil dari fakta bahwa padding dihitung berdasarkan lebar elemen yang mengandung.


1

Mungkin ini bisa membantu, itu bukan latar belakang, tetapi Anda mendapatkan ide sederhana

    <style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
    <div>Hello</div>
</div>

1

Anda bisa melakukan hal seperti itu

<div style="background-image: url(http://your-image.jpg); position:relative;">
 <img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>

1

Jika Anda tahu rasio gambar pada waktu membangun, ingin ketinggian berdasarkan tinggi jendela dan Anda baik-baik saja menargetkan browser modern (IE9 +) , maka Anda dapat menggunakan unit viewport untuk ini:

.width-ratio-of-height {
  overflow-x: scroll;
  height: 100vh;
  width: 500vh; /* width here is 5x height */
  background-image: url("http://placehold.it/5000x1000");
  background-size: cover;
}

Tidak seperti yang diminta OP, tapi mungkin cocok untuk banyak dari mereka yang melihat pertanyaan ini, jadi ingin memberikan opsi lain di sini.

Fiddle: https://jsfiddle.net/6Lkzdnge/


1

Saya melihat beberapa solusi dan mereka hebat tetapi saya pikir saya menemukan cara yang sangat mudah.

Pertama, kita perlu mendapatkan rasio dari gambar latar belakang. Kami hanya membagi satu dimensi melalui dimensi lain. Maka kita mendapatkan sesuatu seperti misalnya 66,4%

Ketika kami memiliki rasio gambar, kami cukup menghitung ketinggian div dengan mengalikan rasio dengan lebar viewport:

height: calc(0.664 * 100vw);

Bagi saya, ini berfungsi, set tinggi div dengan benar dan ubah ketika jendela diubah ukurannya.


1

Misalkan Anda memiliki beberapa hal seperti ini:

<div class="content">
    ... // inner HTML
</div>

dan Anda ingin menambahkan latar belakang untuk itu, tetapi Anda tidak tahu dimensi gambar.

Saya memiliki masalah yang sama, dan saya menyelesaikannya dengan menggunakan kotak:

HTML

<div class="outer">
    <div class="content">
        ... // inner HTML
    </div>
    <img class="background" />
</div>

CSS

.outer{
    display: grid;
    grid-template: auto / auto;
    // or you can assign a name for this block
}
.content{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}
.background{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

z-indexhanya untuk menempatkan gambar di latar belakang, Anda tentu saja dapat menempatkan di img.backgroundatas div.content.

CATATAN : Ini dapat menyebabkan div.contentketinggian gambar yang sama, jadi jika div.contentada anak yang ditempatkan sesuai dengan tingginya, Anda mungkin ingin mengatur angka bukan sesuatu seperti 'otomatis'.


0

Apakah masalah ini dengan CMS Umbraco dan dalam skenario ini Anda dapat menambahkan gambar ke div menggunakan sesuatu seperti ini untuk atribut 'style' dari div:

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

0

Saya telah menangani masalah ini untuk sementara waktu dan memutuskan untuk menulis plugin jquery untuk mengatasi masalah ini. Plugin ini akan menemukan semua elemen dengan kelas "show-bg" (atau Anda dapat memberikannya pemilih Anda sendiri) dan menghitung dimensi gambar latar belakangnya. yang harus Anda lakukan adalah memasukkan kode ini, tandai elemen yang diinginkan dengan class = "show

Nikmati!

https://bitbucket.org/tomeralmog/jquery.heightfrombg


0

Solusi terbaik yang dapat saya pikirkan adalah dengan menentukan lebar dan tinggi Anda dalam persen. Ini memungkinkan Anda untuk mengubah ukuran layar berdasarkan ukuran monitor Anda. itu lebih dari tata letak responsif ..

Sebagai contoh. kamu punya

<br/>
<div> . //This you set the width percent to %100
    <div> //This you set the width percent to any amount . if you put it by 50% , it will be half
    </div>
 </div>

Ini adalah pilihan terbaik jika Anda ingin tata letak responsif, saya tidak akan merekomendasikan float, dalam beberapa kasus float boleh digunakan. tetapi dalam kebanyakan kasus, kami menghindari penggunaan float karena akan memengaruhi banyak hal ketika Anda melakukan pengujian lintas-browser.

Semoga ini membantu :)


-1

sebenarnya itu sangat mudah ketika Anda tahu bagaimana melakukannya:

<section data-speed='.618' data-type='background' style='background: url(someUrl) 
top center no-repeat fixed;  width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>

triknya adalah hanya dengan mengatur div tertutup hanya sebagai div normal dengan nilai dimensi yang sama dengan nilai dimensi latar belakang (dalam contoh ini, 100% dan 40vw).


Anda mengatur ketinggian menjadi proporsi lebar jendela. Ini tidak akan berfungsi dalam semua kasus - dan beberapa konten Anda, seperti kecepatan data tidak ada hubungannya dengan jawaban Anda.
Polyducks

Bukankah kebanyakan hal "cukup mudah ketika Anda tahu cara melakukannya"?
Scott Marcus

-2

Saya memecahkan ini menggunakan jQuery. Sampai aturan CSS baru memungkinkan untuk jenis perilaku ini secara native saya menemukan itu adalah cara terbaik untuk melakukannya.

Siapkan div Anda

Di bawah ini Anda memiliki div yang Anda inginkan untuk menampilkan latar belakang ("pahlawan") dan kemudian konten batin / teks yang ingin Anda overlay di atas gambar latar belakang Anda ("batin"). Anda dapat (dan harus) memindahkan gaya inline ke kelas pahlawan Anda. Saya meninggalkan mereka di sini sehingga cepat dan mudah untuk melihat gaya apa yang diterapkan padanya.

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

Hitung rasio aspek gambar

Selanjutnya hitung rasio aspek Anda untuk gambar Anda dengan membagi tinggi gambar Anda dengan lebarnya. Misalnya, jika tinggi gambar Anda adalah 660 dan lebar Anda adalah 1280 rasio aspek Anda adalah 0,5156.

Siapkan acara penyesuaian ukuran jendela jQuery untuk menyesuaikan ketinggian

Terakhir, tambahkan pendengar acara jQuery untuk mengubah ukuran jendela dan kemudian hitung tinggi pahlawan Anda berdasarkan dari aspek rasio dan perbarui. Solusi ini biasanya meninggalkan piksel tambahan di bagian bawah karena perhitungan tidak sempurna menggunakan rasio aspek sehingga kami menambahkan -1 ke ukuran yang dihasilkan.

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

Pastikan itu berfungsi pada pemuatan halaman

Anda harus melakukan panggilan pengubahan ukuran di atas saat halaman memuat agar ukuran gambar dihitung sejak awal. Jika tidak, maka div pahlawan tidak akan menyesuaikan sampai Anda mengubah ukuran jendela. Saya mengatur fungsi terpisah untuk melakukan penyesuaian ukuran. Inilah kode lengkap yang saya gunakan.

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

-2

Jika Anda dapat membuat gambar di Photoshop di mana lapisan utama memiliki opacity 1 atau lebih dan pada dasarnya transparan, letakkan img itu di div dan kemudian buat gambar nyata gambar latar belakang. KEMUDIAN atur opacity dari img ke 1 dan tambahkan dimensi ukuran yang Anda inginkan.

Gambar itu dilakukan dengan cara itu, dan Anda bahkan tidak dapat menarik gambar yang tidak terlihat dari halaman yang keren.


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.