我如何让一个div自动调整到背景的大小,我为它没有设置一个特定的高度(或最低高度)?
当前回答
这个怎么样?
.fixed-centered-covers-entire-page { 保证金:汽车; 背景图片:url (https://i.imgur.com/Ljd0YBi.jpg); 平铺方式:不再重演;background-size:封面; 背景位置:50%; background - color: # fff; 左:0; 右:0; 上图:0; 底部:0; z - index: 1; 位置:固定; } < div class = " fixed-centered-covers-entire-page " > < / div >
演示:http://jsfiddle.net/josephmcasey/KhPaF/
其他回答
如果你可以在Photoshop中制作一张图像,其中主图层的不透明度为1左右,基本上是透明的,将img放在div中,然后将真实的图片作为背景图像。然后设置img的不透明度为1,并添加你想要的尺寸。
这张图片就是这样做的,你甚至不能把不可见的图像拖出页面,这很酷。
在Umbraco CMS中有这个问题,在这种情况下,你可以使用div的'style'属性将图像添加到div:
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
这个怎么样?
.fixed-centered-covers-entire-page { 保证金:汽车; 背景图片:url (https://i.imgur.com/Ljd0YBi.jpg); 平铺方式:不再重演;background-size:封面; 背景位置:50%; background - color: # fff; 左:0; 右:0; 上图:0; 底部:0; z - index: 1; 位置:固定; } < div class = " fixed-centered-covers-entire-page " > < / div >
演示:http://jsfiddle.net/josephmcasey/KhPaF/
你可以在服务器端做:通过测量图像,然后设置div大小,或者用JS加载图像,读取它的属性,然后设置div大小。
这里有一个想法,把同样的图像在div作为IMG标签,但给它可见性:隐藏+发挥位置相对+给这个div的图像作为背景。
我看了一些解决方案,它们都很棒,但我觉得我找到了一个非常简单的方法。
首先,我们需要从背景图像中获取比例。我们简单地将一个维度划分为另一个维度。然后是66.4%
当我们有图像比率时,我们可以简单地计算div的高度,将比率乘以视口宽度:
height: calc(0.664 * 100vw);
对我来说,它工作,正确设置div高度,并在窗口调整大小时更改它。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?