我如何让一个div自动调整到背景的大小,我为它没有设置一个特定的高度(或最低高度)?
当前回答
有一个纯CSS的解决方案,其他的答案错过了。
“content:”属性主要用于在元素中插入文本内容,但也可以用于插入图像内容。
.my-div:before {
content: url("image.png");
}
这将导致div将其高度调整为图像的实际像素大小。要调整宽度,添加:
.my-div {
display: inline-block;
}
其他回答
添加到原来接受的答案只需添加样式宽度:100%;到内部图像,以便它将自动收缩/扩展的移动设备,而不会在移动视图中采取大的顶部或底部边距。
<div style="background-image: url(http://your-image.jpg);background-position:center;background-repeat:no-repeat;background-size: contains;height: auto;"> <img src="http://your-image.jpg" style="可见性:隐藏;宽度:100%;“/> < / div >
我用jQuery解决了这个问题。直到新的CSS规则允许这种类型的行为,我发现这是最好的方法。
设置你的divs
下面是你想要显示背景的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事件监听器来调整窗口大小,然后根据纵横比计算英雄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调用,以便在一开始就计算出图像的大小。如果你不这样做,那么英雄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();
}
});
我已经处理这个问题有一段时间了,决定写一个jquery插件来解决这个问题。 这个插件会找到所有带有“show-bg”类的元素(或者你可以传递给它你自己的选择器),并计算它们的背景图像尺寸。 您所要做的就是包含这段代码,用class="show "标记所需的元素
享受吧!
https://bitbucket.org/tomeralmog/jquery.heightfrombg
假设你有这样的东西:
<div class="content">
... // inner HTML
</div>
你想给它添加一个背景,但你不知道图像的尺寸。
我也遇到过类似的问题,我用网格解决了它:
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索引是用来放置背景图像的,你当然可以放置img。div.content上面的背景。
注意:这可能会导致div.content具有与图片相同的高度,所以如果div.content有任何根据其高度放置的子元素,你可能想要设置一个数字,而不是像'auto'这样的东西。
我会做相反的事情,将图像放在主div中,宽度为100%,这将使div和图像都响应屏幕大小,
然后在主div的宽度和高度为100%的绝对定位div中添加内容。
<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>
推荐文章
- CSS/HTML:什么是使文本斜体的正确方法?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值
- CSS div元素-如何显示水平滚动条只?
- 如何指定一个元素后包装在css flexbox?
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用“!”的含义是什么?重要的”?
- 用CSS截断长字符串:可行吗?
- 重要的样式
- 灰色的图像与CSS?
- CSS中*和*|*的区别是什么?
- 资源解释为样式表,但以MIME类型text/html传输(似乎与web服务器无关)
- CSS高度:100% vs高度:auto
- 复选框输入是否只在被选中时才发布数据?