Jak uzyskać wysokość div, aby automatycznie dostosowywać się do rozmiaru tła?

Jak uzyskać div, aby automatycznie dostosowywał się do rozmiaru ustawionego dla niego tła bez ustawiania dla niego określonej wysokości (lub minimalnej wysokości)?

Innym, być może nieefektywnym rozwiązaniem byłoby włączenie obrazu do imgelementu ustawionego na visibility: hidden;. Następnie wykonajbackground-image otaczające div div taki sam jak obraz.

Spowoduje to ustawienie otaczającego div do rozmiaru obrazu w imgelemencie, ale wyświetli go jako tło.

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

Istnieje bardzo fajny i fajny sposób, aby obraz tła działał jak imgelement, dzięki czemu dostosowuje się heightautomatycznie. Musisz znać obraz widthi heightproporcje. Ustaw heightkontener na 0 i ustawpadding-top procentową w oparciu o współczynnik obrazu.

Będzie to wyglądać następująco:

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

Właśnie dostałeś obraz tła z automatyczną wysokością, który będzie działał jak element img. Oto działający prototyp (możesz zmienić rozmiar i sprawdzić wysokość div): http://jsfiddle.net/TPEFn/2/

Nie ma możliwości automatycznego dopasowania rozmiaru obrazu tła za pomocą CSS.

Możesz włamać się do niego, mierząc obraz tła na serwerze, a następnie stosując te atrybuty do div, jak wspomnieli inni.

Możesz również zhakować trochę javascript, aby zmienić rozmiar div na podstawie rozmiaru obrazu (po pobraniu obrazu) - to w zasadzie to samo.

Jeśli potrzebujesz div do automatycznego dopasowania obrazu, mogę zapytać, dlaczego po prostu nie umieścisz <img>tagu wewnątrz div?

Ta odpowiedź jest podobna do innych, ale ogólnie jest najlepsza dla większości aplikacji. Musisz znać rozmiar obrazu przed ręką, co zwykle robisz. Umożliwi to dodawanie tekstu nakładki, tytułów itp. Bez ujemnego dopełniania lub bezwzględnego pozycjonowania obrazu. Kluczem jest ustawienie% wypełnienia, aby dopasować proporcje obrazu, jak pokazano w poniższym przykładzie. Użyłem tej odpowiedzi i zasadniczo dodałem tło obrazu.

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

Może to może pomóc, nie jest to dokładnie tło, ale masz pomysł:

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

Jestem prawie pewien, że nigdy nie będzie to widoczne tutaj. Ale jeśli twój problem był taki sam jak mój, oto moje rozwiązanie:

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

Chciałem mieć div na środku obrazu, a to mi na to pozwoli.

Istnieje czyste rozwiązanie CSS, którego pominięto w innych odpowiedziach.

Właściwość „content:” służy głównie do wstawiania treści tekstowej do elementu, ale może być również używana do wstawiania treści obrazkowych.

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

Spowoduje to zmianę rozmiaru div do rzeczywistej wielkości piksela obrazu. Aby zmienić również szerokość, dodaj:

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

Możesz to zrobić po stronie serwera: mierząc obraz, a następnie ustawiając rozmiar div, LUB ładując obraz za pomocą JS, przeczytaj jego atrybuty, a następnie ustaw rozmiar DIV.

A oto pomysł, umieść ten sam obraz wewnątrz div jako tag IMG, ale daj mu widoczność: ukryty + graj z pozycją względną + daj temu div obraz jako tło.

Miałem ten problem i znalazłem odpowiedź Hasanaviego, ale dostałem mały błąd podczas wyświetlania obrazu tła na szerokim ekranie - Obraz tła nie rozprzestrzenił się na całą szerokość ekranu.

Oto moje rozwiązanie - oparte na kodzie Hasanaviego, ale lepsze ... i to powinno działać zarówno na bardzo szerokich ekranach, jak i na ekranach mobilnych.

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

Jak można zauważyć, background-size: contain;nieruchomości nie mieszczą się w bardzo szerokich ekranach ibackground-size: cover; właściwość nie pasuje do ekranów mobilnych, więc użyłem tego @mediaatrybutu do zabawy z rozmiarami ekranów i rozwiązania tego problemu.

Co powiesz na to :)

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

Jeśli jest to pojedynczy z góry określony obraz tła i chcesz, aby div reagował bez zniekształcania proporcji obrazu tła, możesz najpierw obliczyć współczynnik kształtu obrazu, a następnie utworzyć div, który zachowa jego proporcje, wykonując następujące czynności :

Powiedzmy, że chcesz mieć współczynnik proporcji 4/1, a szerokość div wynosi 32%:

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

Wynika to z faktu, że wypełnienie jest obliczane na podstawie szerokości elementu zawierającego.

Może to pomóc, nie jest to dokładnie tło, ale masz prosty pomysł

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

Możesz zrobić coś takiego

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

Jeśli znasz współczynnik obrazu w czasie kompilacji, chcesz, aby wysokość była oparta na wysokości okna i jesteś w stanie celować w nowoczesne przeglądarki (IE9 +) , możesz do tego użyć jednostek rzutni:

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

Nie do końca to, o co prosiła OP, ale prawdopodobnie dobre dopasowanie dla wielu osób oglądających to pytanie, więc chciałem dać tutaj inną opcję.

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

Spojrzałem na niektóre rozwiązania i są świetne, ale myślę, że znalazłem zaskakująco łatwy sposób.

Najpierw musimy uzyskać stosunek z obrazu tła. Po prostu dzielimy jeden wymiar na inny. Wtedy otrzymujemy coś takiego jak na przykład 66,4%

Gdy mamy współczynnik obrazu, możemy po prostu obliczyć wysokość div, mnożąc współczynnik przez szerokość rzutni:

height: calc(0.664 * 100vw);

Dla mnie to działa, odpowiednio ustawia wysokość div i zmienia ją po zmianie rozmiaru okna.

Załóżmy, że masz coś takiego:

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

i chcesz dodać do niego tło, ale nie znasz wymiaru obrazu.

Miałem podobny problem i rozwiązałem go za pomocą siatki:

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-indexsłuży tylko do umieszczenia obrazu w tle, możesz oczywiście umieścić go img.backgroundnad div.content.

UWAGA : może powodować, że div.contentobraz ma tę samą wysokość obrazu, więc jeśli div.contentjakieś dzieci ustawią się zgodnie z jego wysokością, możesz chcieć ustawić liczbę inną niż „auto”.

Miałem ten problem z Umbraco CMS iw tym scenariuszu możesz dodać obraz do div, używając czegoś takiego dla atrybutu „style” div:

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

Przez jakiś czas zajmowałem się tym problemem i postanowiłem napisać wtyczkę jquery, aby rozwiązać ten problem. Ta wtyczka znajdzie wszystkie elementy z klasą „show-bg” (lub możesz przekazać jej własny selektor) i obliczyć wymiary obrazu tła. wszystko co musisz zrobić, to dołączyć ten kod, zaznaczyć żądane elementy za pomocą class = "show

Cieszyć się!

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

Najlepszym rozwiązaniem, jakie mogę wymyślić, jest podanie szerokości i wysokości w procentach. Umożliwi to zmianę rozmiaru ekranu na podstawie rozmiaru monitora. bardziej responsywny układ ..

Na przykład. ty masz

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

Jest to najlepsza opcja, jeśli chcesz mieć responsywny układ, nie polecam float, w niektórych przypadkach float jest w porządku. ale w większości przypadków unikamy używania zmiennoprzecinkowego, ponieważ wpłynie to na wiele rzeczy podczas testowania w różnych przeglądarkach.

Mam nadzieję że to pomoże :)

w rzeczywistości jest to dość łatwe, gdy wiesz, jak to zrobić:

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

sztuczka polega na ustawieniu dołączonej div tak, jak normalnej div z wartościami wymiarów takimi samymi jak wartości wymiarów tła (w tym przykładzie 100% i 40vw).

Rozwiązałem to za pomocą jQuery. Dopóki nowe reguły CSS nie pozwolą na takie zachowanie natywnie, uważam, że jest to najlepszy sposób na zrobienie tego.

Skonfiguruj swoje divy

Poniżej masz div, na którym ma się pojawiać tło („bohater”), a następnie wewnętrzną treść / tekst, który chcesz nałożyć na obraz tła („wewnętrzny”). Możesz (i powinieneś) przenieść style wbudowane do swojej klasy bohatera. Zostawiłem je tutaj, aby szybko i łatwo zobaczyć, jakie style są do niego stosowane.

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

Oblicz proporcje obrazu

Następnie obliczyć współczynnik kształtu obrazu, dzieląc wysokość obrazu przez szerokość. Na przykład, jeśli wysokość obrazu wynosi 660, a szerokość 1280, współczynnik proporcji wynosi 0,5156.

Skonfiguruj zdarzenie zmiany rozmiaru okna jQuery, aby dostosować wysokość

Na koniec dodaj detektor zdarzeń jQuery do zmiany rozmiaru okna, a następnie oblicz wysokość div twojego bohatera na podstawie współczynnika kształtu i zaktualizuj go. To rozwiązanie zwykle pozostawia dodatkowy piksel na dole ze względu na niedokładne obliczenia przy użyciu współczynnika kształtu, więc dodajemy -1 do uzyskanego rozmiaru.

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

Upewnij się, że działa przy ładowaniu strony

Powinieneś wykonać powyższe wywołanie zmiany rozmiaru, gdy strona ładuje się, aby na początku obliczać rozmiary obrazu. Jeśli tego nie zrobisz, div div bohatera nie dostosuje się, dopóki nie zmienisz rozmiaru okna. Ustawiam osobną funkcję, aby wykonać zmiany rozmiaru. Oto pełny kod, którego używam.

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

Jeśli możesz zrobić obraz w Photoshopie, gdzie główna warstwa ma krycie równe 1 lub mniej więcej i jest w zasadzie przezroczysta, umieść to zdjęcie w div, a następnie utwórz prawdziwy obraz jako tło. NASTĘPNIE ustaw krycie obrazu na 1 i dodaj żądane wymiary rozmiaru.

To zdjęcie jest zrobione w ten sposób i nie można nawet przeciągnąć niewidocznego obrazu ze strony, która jest fajna.

po prostu dodaj do div

style="overflow:hidden;"