如何让div高度自动调整到背景大小？
我怎么得到一个div自动调整到我设置的背景的大小，而没有设置一个特定的高度（或最小高度）？
另一种可能是效率低下的解决scheme是将图像包含在设置为visibility: hidden;的img元素下visibility: hidden; 。 然后使周围div的background-image与图像相同。
这会将周围div设置为img元素中图像的大小，但将其显示为背景。
<div style="background-image: url(http://your-image.jpg);"> <img src="http://your-image.jpg" style="visibility: hidden;" /> </div>
有一个非常好的和酷的方式来使背景图像工作像一个img元素，所以它自动调整其height 。 你需要知道图像的width 。 将容器的height设置为0，并根据图像比率将padding-top设置为百分比。
它将如下所示：
div { background-image: url('http://www.pets4homes.co.ukhttp://img.dovov.comarticles/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元素一样工作。 这里是一个工作原型（你可以resize并检查div高度）： http : //jsfiddle.net/TPEFn/2/
没有办法使用CSS自动调整背景图片大小。
您可以通过测量服务器上的背景图像，然后将这些属性应用到div来破解它，就像其他人所说的那样。
你也可以砍掉一些JavaScript来调整div的大小（一旦图像被下载） – 这基本上是一样的东西。
如果你需要你的div自动适应图像，我可能会问，你为什么不把一个<img>标签内的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>
也许这可以帮助，这不完全是一个背景，但你明白了：
<style> div { float: left; position: relative; } div img { position: relative; } div div { position: absolute; top:0; left:0; } </style> <div> <img src="apod/image/0903/omegacen_davis.jpg" /> <div>Hi there</div> </div>
很确定，这将永远不会被看到这里一路下降。 但是，如果你的问题和我的一样，这是我的解决scheme：
.imaged-container{ background-image:url('<%= asset_path("landing-page.png") %> '); background-repeat: no-repeat; background-size: 100%; height: 65vw; }
我想在图像的中心有一个div，这将允许我这样做。
有一个纯粹的CSS解决scheme，其他答案已经错过了。
“content：”属性主要用于将文本内容插入元素，但也可用于插入图像内容。
.my-div:before { content: url("image.png"); }
这会导致div将其高度调整为图像的实际像素大小。 要调整宽度，请添加：
.my-div { display: inline-block; }
你可以做到服务器端：通过测量图像，然后设置div的大小，或者用JS加载图像，读取它的属性，然后设置DIV大小。
这里是一个想法，把相同的图像内部的IMG标签，但给它的可见性：隐藏+与相对位置播放+给这个div的图像作为背景。
我有这个问题，发现Hasanavi的答案，但是当在宽屏幕上显示背景图像时，我得到了一个小错误 – 背景图像没有扩大到整个屏幕的宽度。
所以这里是我的解决scheme – 基于Hasanavi的代码，但更好… …这应该在超宽屏幕和手机屏幕上工作。
/*WIDE SCREEN SUPPORT*/ @media screen and (min-width: 769px) { div { background-image: url('http://www.pets4homes.co.ukhttp://img.dovov.comarticles/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.ukhttp://img.dovov.comarticles/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; 财产doas不适合在超宽屏幕和background-size: cover; 财产不适合在手机屏幕上，所以我用这个@media属性来玩弄屏幕尺寸并解决这个问题。
有这个问题与Umbraco CMS和在这种情况下，你可以添加图像的div使用这样的div的'样式'属性这样的：
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
可能是这可以帮助，这不完全是一个背景，但你有一个简单的想法
<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/statichttp://img.dovov.comrecycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" /> <div>Hello</div> </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>
我一直在处理这个问题一段时间，并决定写一个jQuery插件来解决这个问题。 这个插件会find类“show-bg”的所有元素（或者你可以传递给你自己的select器）并计算它们的背景图像尺寸。 所有你需要做的就是包含这个代码，用class =“show”标记所需的元素
请享用！
如果是单个预定的背景图像，并且您希望div能够响应而不会扭曲背景图像的宽高比，则可以先计算图像的宽高比，然后通过执行以下操作来创build一个保留宽高比的div ：
假设你想要一个4/1的宽高比和div的宽度是32％：
div { width: 32%; padding-bottom: 8%; }
这是由于基于包含元素的宽度计算填充的结果。
我能想到的最好的解决scheme是通过指定你的宽度和高度百分比。 这将允许您根据您的显示器尺寸来重新设置屏幕。 其更多的响应式布局..
举个例子。 你有
<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>
这是最好的select，如果你想要一个响应式布局，我wouldnt推荐浮动，在某些情况下，浮动是可以使用。 但在大多数情况下，我们避免使用float，因为在进行跨浏览器testing时，会影响很多事情。
希望这可以帮助 ：）
当你知道如何去做的时候，其实很简单：
<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规则允许这种types的行为本机，我觉得这是做到这一点的最好方法。
设置你的div
下面你有你想要的背景出现在你的div（“英雄”），然后你想叠加在背景图像（“内”）的内部内容/文字。 你可以（也应该）将内联样式移动到你的英雄类。 我把它们留在了这里，所以很快就能很容易的看到它们的风格。
<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窗口resize事件来调整高度
最后，为窗口大小添加一个jQuery事件监听器，然后根据纵横比计算你的英雄div的高度并更新它。 这个解决scheme通常会在底部留下一个额外的像素，因为使用纵横比的计算不完美，所以我们在结果大小上加上-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调用。 如果你不这样做，那么这个英雄格就不会调整，直到你调整窗口的大小。 我设置了一个单独的function来做resize的调整。 这是我使用的完整代码。
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中创build主图层不透明度为1左右且基本上透明的图像，请将该图像放在div中，然后将真实图片作为背景图像。 然后将img的不透明度设置为1，并添加所需的大小尺寸。
那张照片就是这样做的，你甚至不能将不可见的图像从很酷的页面拖出来。
只需添加到div
style="overflow:hidden;"
