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

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?

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>

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/

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?

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>

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>

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.

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

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.

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.

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/

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.

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>

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>

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/

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.

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'.

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"

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

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 :)

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).

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

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.

tambahkan saja div

style="overflow:hidden;"