Div yüksekliğini arka plan boyutuna otomatik olarak ayarlamak için nasıl?

Bir div için, belirli bir yükseklik (veya min yükseklik) ayarlamadan ayarladığım arka planın boyutuna otomatik olarak ayarlanmasını nasıl sağlayabilirim?

Bir başka, belki de verimsiz bir çözüm, görüntüyü olarak imgayarlanmış bir öğenin altına dahil etmek olacaktır visibility: hidden;. Ardından background-image, çevredeki div'in görüntüyle aynı olmasını sağlayın .

Bu, çevresindeki div öğesini öğedeki görüntünün boyutuna ayarlar, imgancak arka plan olarak görüntüler.

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

Bir arka plan görüntüsünün bir imgöğe gibi çalışmasını sağlamanın çok güzel ve havalı bir yolu vardır, böylece görüntüyü heightotomatik olarak ayarlar . Görüntüyü widthve heightoranı bilmeniz gerekir . Set height0 kabın ve set padding-topgörüntü oranı dayalı olarak yüzdesi.

Aşağıdaki gibi görünecektir:

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

Sadece img öğesi gibi çalışacak otomatik yüksekliğe sahip bir arka plan resminiz var. İşte çalışan bir prototip (div yüksekliğini yeniden boyutlandırabilir ve kontrol edebilirsiniz): http://jsfiddle.net/TPEFn/2/

CSS kullanarak arka plan görüntüsü boyutu için otomatik ayar yapmanın bir yolu yoktur.

Sunucudaki arka plan görüntüsünü ölçüp diğerlerinin de belirttiği gibi div'a bu öznitelikleri uygulayarak etrafı hackleyebilirsiniz.

Görüntü boyutunu temel alarak (resim indirildikten sonra) div'ı yeniden boyutlandırmak için bazı javascriptleri de hackleyebilirsiniz - bu temelde aynı şeydir.

Div'inize görüntüyü otomatik sığdırmak için ihtiyacınız varsa, neden div'inize sadece bir <img>etiket eklemediğinizi sorabilirim ?

Bu cevap diğerlerine benzer, ancak çoğu uygulama için genel olarak en iyisidir. Görüntü boyutunu, genellikle yaptığınız elden önce bilmeniz gerekir. Bu, görüntünün negatif dolgusu veya mutlak konumlandırması olmadan kaplama metni, başlıklar vb. Eklemenizi sağlar. Bu tuş, dolgu% 'sini aşağıdaki örnekte görüldüğü gibi görüntü en boy oranına uyacak şekilde ayarlamaktır. Bu cevabı kullandım ve aslında bir görüntü arka planı ekledim.

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

Belki bu yardımcı olabilir, tam olarak bir arka plan değil, ama fikri anladınız:

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

Bunun burada hiç görülmeyeceğinden eminim. Ama senin sorunun benimkiyle aynıysa, bu benim çözümümdü:

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

Resmin merkezinde bir div yapmak istedim ve bu bana izin verecek.

Diğer cevapların atladığı saf bir CSS çözümü var.

"Content:" özelliği çoğunlukla bir öğeye metin içeriği eklemek için kullanılır, ancak görüntü içeriği eklemek için de kullanılabilir.

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

Bu, div'in yüksekliğini görüntünün gerçek piksel boyutuna göre yeniden boyutlandırmasına neden olur. Genişliği de yeniden boyutlandırmak için şunu ekleyin:

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

Sunucu tarafında yapabilirsiniz: görüntüyü ölçüp div boyutunu ayarlayarak VEYA görüntüyü JS ile yükleyerek özniteliklerini okuyun ve DIV boyutunu ayarlayın.

Ve işte bir fikir, aynı görüntüyü bir IMG etiketi olarak div'ın içine yerleştirin, ancak görünürlük verin: gizli + göreli konumla + bu div'e görüntüyü arka plan olarak verin.

Bu sorunu yaşadım ve Hasanavi'nin cevabını buldum, ancak arka plan görüntüsünü geniş bir ekranda görüntülerken küçük bir hata aldım - Arka plan görüntüsü, ekranın tüm genişliğine yayılmadı.

İşte benim çözümüm - Hasanavi'nin koduna dayalı ama daha iyi ... ve bu hem ekstra geniş hem de mobil ekranlarda çalışmalı.

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

Fark etmiş olabileceğiniz gibi, background-size: contain;özellik doas ekstra geniş ekranlara iyi uymuyor ve background-size: cover;özellik mobil ekranlara iyi uymuyor, bu yüzden @mediaekran boyutu ile oynamak ve bu sorunu çözmek için bu özelliği kullandım .

Buna ne dersin :)

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

Önceden belirlenmiş tek bir arka plan görüntüsü ise ve arka plan görüntüsünün en boy oranını bozmadan div'in yanıt vermesini istiyorsanız, önce görüntünün en boy oranını hesaplayabilir ve ardından aşağıdakileri yaparak en boy oranını koruyan bir div oluşturabilirsiniz. :

4/1 en boy oranı istediğinizi ve div'in genişliğinin% 32 olduğunu varsayalım:

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

Bu, dolgu maddesinin taşıyıcı elemanın genişliğine göre hesaplanması gerçeğinden kaynaklanmaktadır.

Bu yardımcı olabilir, tam olarak bir arka plan değil, ama basit bir fikir elde edersiniz

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

Böyle bir şey yapabilirsin

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

Oluşturma sırasında görüntünün oranını biliyorsanız, yüksekliğin pencere yüksekliğini temel almasını isteyin ve modern tarayıcıları (IE9 +) hedeflemeyi tercih ederseniz, bunun için görünüm alanı birimlerini kullanabilirsiniz:

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

OP'nin tam olarak sorduğu şey değil, ama muhtemelen bu soruyu görüntüleyenlerin çoğu için iyi bir uyum, bu yüzden burada başka bir seçenek vermek istedim.

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

Bazı çözümlere baktım ve harikalar ama bence şaşırtıcı derecede kolay bir yol buldum.

İlk olarak, oranı arka plan resminden almamız gerekiyor. Biz sadece bir boyutu diğerine böleriz. Sonra örneğin% 66.4 gibi bir şey elde ederiz.

Görüntü oranımız olduğunda, oranı görünüm alanı genişliğiyle çarparak div yüksekliğini hesaplayabiliriz:

height: calc(0.664 * 100vw);

Benim için çalışıyor, div yüksekliğini düzgün bir şekilde ayarlıyor ve pencere yeniden boyutlandırıldığında değiştiriyor.

Diyelim ki böyle bir şey var:

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

ve buna bir arka plan eklemek istiyorsunuz, ancak görüntünün boyutunu bilmiyorsunuz.

Benzer bir sorunum vardı ve ızgarayı kullanarak çözdüm:

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-indexKurs yeri can, sadece arka planda aslında görüntü yerleştirerek içindir img.backgroundyukarıda div.content.

NOT : div.contentresmin aynı yüksekliğine neden olabilir , bu nedenle div.contentyüksekliğine göre yerleştirilmiş herhangi bir çocuk varsa , 'otomatik' gibi bir şey olmayan bir sayı ayarlamak isteyebilirsiniz.

Umbraco CMS ile bu sorunu vardı ve bu senaryoda div 'stil' özniteliği için böyle bir şey kullanarak div görüntü ekleyebilirsiniz:

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

Bir süredir bu konuyla uğraşıyorum ve bu sorunu çözmek için bir jquery eklentisi yazmaya karar verdim. Bu eklenti, "show-bg" sınıfına sahip tüm öğeleri bulur (veya kendi seçicinizi iletebilirsiniz) ve arka plan resmi boyutlarını hesaplar. tek yapmanız gereken bu kodu eklemektir, istenen öğeleri class = "show ile işaretleyin

Zevk almak!

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

Düşünebileceğim en iyi çözüm, genişlik ve yüksekliğinizi yüzde olarak belirtmektir. Bu, monitörünüzün boyutuna göre ekranınızı yeniden boyutlandırmanıza olanak tanır. daha duyarlı bir düzen ..

Bir örnek için. var

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

Duyarlı bir düzen istiyorsanız, en iyi seçenek budur, şamandıra tavsiye etmem, bazı durumlarda şamandıra kullanmak iyidir. ancak çoğu durumda, tarayıcılar arası test yaparken çok sayıda şeyi etkileyeceğinden şamandıra kullanmaktan kaçınırız.

Bu yardımcı olur umarım :)

aslında bunu nasıl yapacağınızı bildiğinizde oldukça kolaydır:

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

hile sadece kapalı div değerini arka plan boyutlu değerleriyle aynı boyut değerlerine sahip normal bir div olarak ayarlamaktır (bu örnekte% 100 ve 40vw).

Bunu jQuery kullanarak çözdüm. Yeni CSS kuralları bu tür davranışlar için doğal olarak izin verene kadar bunu yapmanın en iyi yolu olduğunu düşünüyorum.

Div'lerinizi ayarlayın

Aşağıda, arka planınızın görünmesini istediğiniz bölümünüz ("kahraman") ve ardından arka plan resminizin üstüne yerleştirmek istediğiniz iç içerik / metin ("iç") var. Satır içi stilleri kahraman sınıfınıza taşıyabilirsiniz (ve taşımalısınız). Onları burada bıraktım, böylece hangi stillerin uygulandığını görmek hızlı ve kolaydır.

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

Görüntü en boy oranını hesapla

Ardından, görüntünüzün yüksekliğini genişliğe bölerek görüntünüz için en boy oranınızı hesaplayın. Örneğin, görüntü yüksekliğiniz 660 ve genişliğiniz 1280 ise en boy oranınız 0.5156'dır.

Yüksekliği ayarlamak için jQuery penceresi yeniden boyutlandırma olayı ayarlama

Son olarak, pencere yeniden boyutlandırmak için bir jQuery olay dinleyicisi ekleyin ve ardından en boy oranına göre kahraman div'inizin yüksekliğini hesaplayın ve güncelleyin. Bu çözüm tipik olarak en boy oranını kullanan kusurlu hesaplamalar nedeniyle altta fazladan bir piksel bırakır, böylece elde edilen boyuta bir -1 ekleriz.

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

Sayfa yüklenirken çalıştığından emin olun

Sayfa yüklendiğinde, resim boyutlarının başlangıçta hesaplanması için yukarıdaki yeniden boyutlandırma çağrısını gerçekleştirmelisiniz. Bunu yapmazsanız, kahraman div pencereyi yeniden boyutlandırana kadar ayarlama yapmaz. Yeniden boyutlandırma ayarlarını yapmak için ayrı bir işlev ayarladım. İşte kullandığım kodun tamamı.

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

Photoshop'ta ana katmanın 1 veya daha fazla opaklığa sahip olduğu ve temelde şeffaf olduğu bir görüntü oluşturabiliyorsanız, bu img'yi div içine koyun ve ardından gerçek resmi arka plan resmi yapın. Sonra img'nin opaklığını 1 olarak ayarlayın ve istediğiniz boyut boyutlarını ekleyin.

Bu resim bu şekilde yapılır ve görünmez resmi serin olan sayfadan bile sürükleyemezsiniz.

sadece ekle div

style="overflow:hidden;"