使用background-size:cover
以400x200的背景图像覆盖浏览器的视口:
html, body {height:100%;}
body {background:url("http://lorempixel.com/g/400/200/") center no-repeat; background-size:cover;}
我想通过javascript检索应用于图片的计算background-size
值,例如1536px 768px
实时演示:https://codepen.io/abernier/pen/rHkEv
NB:我只想阅读它,而不是计算它(因为在某种程度上,浏览器已经有了)
9条答案
按热度按时间gdx19jrr1#
我知道我很晚了党,但我已经使用下面的代码来解决这个问题.
详细的演练可在此处http://www.gene.co.uk/get-computed-dimensions-background-image-background-size-cover/找到
5jvtdoz22#
可以使用Image对象获取背景图像文件的尺寸,然后将其与元素的大小进行比较
然后,根据background-size属性的值,可以获得精确的比例因子
默认情况比较复杂,因为背景大小的每一部分都可以用单位表示,所以正确处理这些单位的代码会有点粗糙和难看。
基于jQuery的fiddle
qqrboqgw3#
background-size
属性指定了背景图像的大小,而不是它的“缩放因子”。你能从这个属性中得到的唯一东西就是它的大小。如果这个因子存在的话,它应该在 * 另一个 * 属性(-ies)中。你挖错地方了。回答这个问题时,我不得不问自己另一个问题:* 这个号码存在吗?*
让我们先假设它是这样的,并且值是2.135(是原来的两倍)。如果我把
cover
改为100% 100%
,这个数字会发生什么变化。在这种情况下,“水平缩放因子”保持与cover
相同,而“垂直”缩放因子发生了不同的变化。你期望这个数字是什么?它应该如何变化?一个因素可能改变,而另一个因素可能不变,这一事实使我认为它们可能改变(并且应该)是单独的值(谁知道,也许“-vendor-background-size-x-zoom-factor”和“-vendor-background-size-y-zoom-factor”两者都可以具有正值和负值并且两者都不包括在任何CSS规范中并且两者都将保持在浏览器的罩下,* 假设它们是CSS属性的形式,而不是简单的变量或谁知道是什么 *)。
当然,实际上可能会更复杂一点))
slsn1g294#
现在还不是答案,但我正在做的检查...
我对一个类似的属性
background-position
做了一个小测试,它也接受关键字,如center
、left
...(隐含%),就像background-size
对cover
/contain
所做的那样让我们使用以下内容沙盒化div
现在,让我们使用以下命令检索
center
值:你猜怎么着
不幸的是
抛出错误:
无效访问错误:基础对象不支持某个参数或操作。
qzwqbdag5#
简单地说,浏览器没有提供一种方法来获得背景图像的比例因子的计算值,但是您可以根据规范中描述的规则自己计算它。
cgh8pdjw6#
你可以检查div和原始图像的大小,找出div的宽度或高度是否按比例变短,这意味着图像被拉伸到较小边的100%。例如:如果容器div为600 px X 500 px,图像大小为600 px X 400 px,则图像将调整大小以覆盖整个div,因此其大小将调整为自动X 500 px,这意味着图像的缩放比例为500/400 = 1.25
4uqofj5v7#
没有办法做到这一点,因为它需要加载图像才能给予你一个准确的值。即使这个值是公开的,你也必须等待
window.load
事件,然后才能检索它...在这一点上,只计算你自己的值会更快。更新:根据CSS规范,背景大小在不同的条件下表现不同--无论图像是否具有固有的尺寸/比率(jpeg/svg)(css渐变),是否两个值都设置为“auto”(在这种情况下,它被视为“contain”),是否其中一个“background-repeat”值设置为“round”,是否有多个背景......你明白了。
另外,background-size需要layout(随布局而变化),但不在布局后计算为实际“使用”值的属性列表中。这一点很重要,因为
getComputedStyle
返回实际“使用”值,但“background-size”不经历计算值-〉使用值的过程。再加上你甚至不能得到一个值,直到图像加载的事实...我仍然认为,计算它自己听起来像你最好的选择。
xkrw2x1b8#
尝试:
background-size: contain
这将放大/缩小,并根据设备像素比适合背景大小。这里不需要JavaScript或任何计算,因为浏览器将自行执行其余任务。
u1ehiz5o9#
验证码:
注:
background-size:cover
单独定义