我如何讓一個div自動調整到我為它設置的背景尺寸，而不用為它設置一個特定的高度(或最小高度)？

有一個很好很酷的方法可以讓背景圖片像img元素一樣自動調整高度。你需要知道圖像的寬高比。將容器的高度設置為0，并根據圖像比例將填充頂部設置為百分比。

它將如下所示:

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

你只是得到了一個自動高度的背景圖像，就像一個img元素。這是一個工作原型(你可以調整大小和檢查div的高度):http://jsfiddle.net/8m9ur5qj/

另一個可能效率不高的解決方案是將圖像包含在設置為visibility: hidden的img元素下；。然后使周圍div的背景圖像與圖像相同。

這將把周圍的div設置為img元素中圖像的大小，但將其顯示為背景。

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

使用CSS無法自動調整背景圖像的大小。

正如其他人提到的，您可以通過測量服務器上的背景圖像，然后將這些屬性應用到div來解決這個問題。

您還可以編寫一些javascript來根據圖像大小調整div的大小(一旦圖像下載完畢)——這基本上是一回事。

如果您需要您的div來自動適應圖像，我可能會問為什么不直接放一個& ltimg & gt標簽在你的div里面？

這個答案與其他答案相似，但總體上是大多數應用程序的最佳答案。你需要事先知道圖像的大小，這是你通常會做的。這將讓您添加覆蓋文本，標題等。沒有圖像的負填充或絕對定位。關鍵是設置填充百分比來匹配圖像的縱橫比，如下例所示。我用了這個答案，基本上只是添加了一個圖像背景。

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

我看了一些解決方案，它們都很棒，但我想我找到了一個出乎意料的簡單方法。

首先，我們需要從背景圖像中獲取比例。我們只是通過一個維度來劃分另一個維度。然后我們得到66.4%這樣的數據

當我們有圖像比率時，我們可以簡單地通過將比率乘以視口寬度來計算div的高度:

height: calc(0.664 * 100vw);

對我來說，它能正常工作，正確設置div高度，并在調整窗口大小時改變它。

也許這能有所幫助，這不是確切的背景，但你得到的想法:

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

我很確定這在這里永遠不會被看到。但是如果你的問題和我的一樣，這就是我的解決方案:

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

我想在圖像的中心有一個div，這將允許我這樣做。

有一個純CSS的解決方案，其他答案都漏掉了。

“content:”屬性主要用于將文本內容插入到元素中，但也可以用于插入圖像內容。

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

這將導致div將其高度調整為圖像的實際像素大小。要調整寬度，請添加:

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

最近引入的CSS長寬比屬性(~2020-2021)是一種很好的方式，它不需要填充hacks，并且在所有evergreen瀏覽器上都受支持。

因為我們需要提前知道圖像的長寬比，并且在許多用例中，您可以提前預先確定圖像的尺寸比(但并不總是針對用戶生成的內容)，所以您可以硬編碼一個樣式，或者在必要時內聯css。

當指定寬度時，aspect-ratio將根據提供的比率計算高度(如果指定了高度，則計算寬度)。

div {
    /*common ratio, like an 800*600px image */
    aspect-ratio: 3 / 2;
    /* computed height will be 133.33px, which is width/aspect-ratio */
    width: 200px;
    /* red BG for debugging so any image bleed is shown*/
    background: red; 
    background-image: url('https://images.unsplash.com/photo-1631163190830-8770a0ad4aa9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80');
}

<div></div>

您可以在服務器端完成:通過測量圖像，然后設置div大小，或者用JS加載圖像，讀取它的屬性，然后設置DIV大小。

這里有一個想法，把同樣的圖像作為IMG標簽放在div中，但是給它可見性:隱藏+玩相對位置+給這個div圖像作為背景。

我有這個問題，并找到了Hasanavi的答案，但我在寬屏上顯示背景圖像時遇到了一個小問題-背景圖像沒有擴展到整個屏幕寬度。

這是我的解決方案——基于Hasanavi的代碼，但更好...這應該適用于超寬屏幕和移動屏幕。

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

您可能已經注意到，background-size:contain；屬性不適合超寬屏幕，背景大小:封面；屬性不太適合移動屏幕，所以我使用這個@media屬性來調整屏幕大小并解決這個問題。

這對我很有效:

background-image: url("/assets/image_complete_path");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
height: 100%;

如果它是一個單獨的預先確定的背景圖像，并且您希望div能夠響應而不扭曲背景圖像的縱橫比，您可以首先計算圖像的縱橫比，然后通過執行以下操作創建一個保留其縱橫比的div:

假設您想要4/1的縱橫比，并且div的寬度是32%:

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

這是因為填充是根據包含元素的寬度計算的。

添加到原始接受的答案只是添加樣式寬度:100%；到內部圖像，這樣它會自動縮小/擴大移動設備，不會在移動視圖中占用大量的頂部或底部邊距。

<div style="background-image: url(http://your-image.jpg);background-position:center;background-repeat:no-repeat;background-size: contain;height: auto;">
 <img src="http://your-image.jpg" style="visibility: hidden; width: 100%;" />
</div>

這個怎么樣:)

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

我將做相反的操作，將圖像放在主div中，寬度為100%，這將使div和圖像都響應屏幕大小，

然后將內容添加到一個絕對定位的div中，其寬度和高度是主div的100%。

<div class="main" style="position: relative; width: 100%;">
    <img src="your_image.png" style="width: 100%;">
    <div style="position: absolute; width: 100%; height: 100%; display: flex...">
            YOUR CONTENT
    </div>
</div>

這可能會有所幫助，它不是一個確切的背景，但你得到了簡單的想法

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

你可以做類似的事情

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

如果您知道構建時圖像的比例，想要基于窗口高度的高度，并且您可以使用現代瀏覽器(IE9+)，那么您可以為此使用視口單位:

.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所問的，但可能很適合許多看到這個問題的人，所以想在這里給出另一個選擇。

小提琴:https://jsfiddle.net/6Lkzdnge/

假設你有這樣的東西:

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

你想給它添加一個背景，但是你不知道圖像的尺寸。

我也遇到過類似的問題，我通過使用grid解決了它:

超文本標記語言

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

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.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-index實際上只是用于將圖像放在背景上，當然你可以將img.background放在div.content上面。

注意:這可能會導致div.content與圖片具有相同的高度，因此如果div.content有任何子元素根據其高度放置，您可能需要設置一個數字，而不是類似“auto”的數字。

受到最喜歡的答案的啟發，我最終想出了一個使用最小高度和“大眾”單位的解決方案

我有一張比例非常不尋常的照片

通過實驗，我最終使用了

min-height: 36vw;

該值必須根據圖像的比例進行更改

我的實際頁面中使用的css代碼:

background:url('your-background-image-adress') center center no-repeat;
    background-size: 100%;
    background-position: top center;
    margin-top: 50px;
    width: 100%;
    min-height: 36vw;

代碼筆示例https://codepen.io/viniciusrad/pen/GRNPXoL

在Umbraco CMS上有這個問題，在這種情況下，您可以為div的“style”屬性添加圖像，如下所示:

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

我處理這個問題已經有一段時間了，決定寫一個jquery插件來解決這個問題。 這個插件將找到所有帶有類“show-bg”的元素(或者你可以傳遞給它你自己的選擇器)，并計算它們的背景圖像尺寸。 您所要做的就是包含這段代碼，用class="show

盡情享受吧！

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

我能想到的最好的解決方法是用百分比來指定你的寬度和高度。這將允許您根據顯示器的大小重新調整屏幕大小。它的布局更具響應性..

舉個例子。 你有

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

如果你想要一個響應性的布局，這是最好的選擇，我不推薦浮動，在某些情況下浮動是可以使用的。但是在大多數情況下，我們避免使用float，因為當你進行跨瀏覽器測試時，它會影響很多事情。

希望這有所幫助:)

如果圖像高度可以變化，或者如果您不知道圖像的確切高度，那么使用一點jquery和css就可以解決這個問題:

超文本標記語言

<div class="bg-cover" style="background-image:url(https://i.imgur.com/Ljd0YBi.jpg);"></div>

JQUERY

<script>
var image_url = $('.bg-cover').css('background-image'),
image;

// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
image_url = image_url[1];
image = new Image();

// just in case it is not already loaded
$(image).load(function() {
//alert(image.width + 'x' + image.height);
$('.bg-cover').css('min-height', image.height);
});

image.src = image_url;
}
</script>

為了設置& quot空& quot容器元素與其背景圖像的大小對齊，您只需執行一個小的ratio計算并相應地設置高度。

例如:

假設背景圖像尺寸為1920x600。

寬度和高度之比為3.2 (1920 / 600)。

下一步是根據當前視圖寬度設置包含背景圖像的容器元素的高度:

div.container {
width: 100vw;    
height: calc(100vw / 3.2)
}

因此，例如，如果當前視圖寬度為1600像素，高度將為500像素，背景圖像將正好適合，高度也將正好合適。

實際上，當你知道如何做時，這很容易:

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

訣竅是將封閉的div設置為普通的div，其尺寸值與背景尺寸值相同(在本例中，100%和40vw)。

我用jQuery解決了這個問題。直到新的CSS規則允許這種類型的行為，我發現這是最好的方法。

設置您的div

下面是您希望背景出現的div(“hero”)，然后是您希望覆蓋在背景圖像之上的內部內容/文本(“inner”)。你可以(也應該)將內聯樣式移動到你的英雄類中。我把它們放在這里，這樣就可以很快很容易地看到應用了什么樣式。

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

計算圖像縱橫比

接下來，通過用圖像的高度除以寬度來計算圖像的長寬比。例如，如果你的圖像高度是660，寬度是1280，那么你的長寬比為0.5156。

設置一個jQuery窗口調整大小事件來調整高度

最后，添加一個用于調整窗口大小的jQuery事件偵聽器，然后根據縱橫比計算hero div的高度并更新它。這種解決方案通常會在底部留下一個額外的像素，因為使用縱橫比的計算不完美，所以我們在結果大小上加-1。

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

確保它在頁面加載時工作

您應該在頁面加載時執行上面的resize調用，以便在開始時計算圖像大小。如果不這樣做，那么hero div不會調整，直到你調整窗口的大小。我設置了一個單獨的函數來調整大小。這是我使用的完整代碼。

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上制作一個圖像，其中主圖層的不透明度為1左右，基本上是透明的，那么就把那個img放在div中，然后把真實的圖片作為背景圖像。然后設置img的不透明度為1，添加你想要的尺寸。

那張圖片就是這樣做的，你甚至不能把看不見的圖像從頁面上拽下來，這很酷。

只需添加到div

style="overflow:hidden;"