在包含CSS后，使用jQuery获取background-image的大小
#img { width:300px; height:300px; overflow:hidden; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; color:#fff; } $('#get').click(function () { var width = $('#img').css('background-size').width(); var height = $('#img').css('background-size').height(); alert('Width: ' + width + ' Height: ' + height); }); //I DON'T want the size of the orginal image. I want the size after the background size has been contained.
我希望获得原始背景图像大小，但是在使用jQuery包含背景（在完成此操作之后：background-size：contains;）之后。 有可能吗？
http://jsfiddle.net/QyfG2/
我认为这个计划的缺陷是，当加载页面时，背景图像实际上不是DOM的一部分。 当您查询.css('background-size')您将返回分配给该规则密钥的CSS规则值 （即key：value）。
所以，如果我有一个背景为#000的div ，我要求jQuery返回$('div').css('background')它将返回#000的值。
由于您使用容器来缩放背景图像，要将其压缩到新的维度，因此.css('background-size')值永远不会是像“100px 500px”那样的计算值。 它可能是“自动”。 此外， background-size的属性没有width属性，所以.css('background-size').width()不会返回上面的jQuery中的值。
我能想到的唯一解决方案是使用JS来查找图像的初始尺寸，然后使用页面渲染后它的容器的最终尺寸，并使用math和if-else语句计算两者之间的比例。
例：
IMG original dimensions: 1000px x 400px container's dimensions after page renders: 600px x 200px // Compare the ratio of height / height and width / width widthRatio = .6 heightRatio = .5 // image should scale proportionally, so it must scale to the smallest ratio // eg if it needs to be 50% as tall, it has to be 50% as wide, even though // it could fit set at 60% its original width // so multiply ratio (.5) by original dimensions of image (1000px x 400px) newImgBgDimensions = 500px x 200px
window.onload = function() { var imageSrc = document .getElementById('hello') .style .backgroundImage .replace(/url\((['"])?(.*?)\1\)/gi, '$2') .split(',')[0]; // I just broke it up on newlines for readability var image = new Image(); image.src = imageSrc; var width = image.width, height = image.height; alert('width =' + width + ', height = ' + height) }
你找不到高度宽度的背景图像。没有办法让css能找到像背景图像的高度宽度这样的属性。你可以做的是使用javascript或jquery加载图像然后获取这些图像的高度/宽度。
function getheightwidth(id) { var element = document.getElementById(id); if (element && element.tagName.toLowerCase() == 'img') { return { width: element.width, height: element.height }; } } 
var dimensions= getheightwidth(); alert("Width is " + dimensions.width +"Height is "+ dimensions.height);
这应该解决你的问题:)
使用下面的代码，这可能有助于您在包含后获得背景大小
function get(img){ var imageSrc = $(img).css('backgroundImage') .replace(/url\((['"])?(.*?)\1\)/gi, '$2') .split(',')[0]; var image = new Image(); image.src = imageSrc; var bgwidth = image.width, bgheight = image.height, bgContainWidth = $(img).width(); var bgContainHeight = (bgheight*bgContainWidth)/bgwidth; var decimal = bgContainHeight.toString().split('.'); if(decimal[0]>=5) { bgContainHeight = Math.ceil(bgContainHeight); } else { bgContainHeight = Math.floor(bgContainHeight); } alert('bg Contain width = ' + bgContainWidth + ',bg Contain Height = ' + bgContainHeight); } $('#get').click(function () { get('#img'); });
看演示小提琴： http ： //jsfiddle.net/c4yHf/1/
Actualy您正在寻找容器的大小（
）而不是图像。 如果您将获得容器尺寸您将获得其中的图像大小（它的背景）。 我将给你jQuery解决方案：
$(document).ready(function(){ alert('width: ' + $('#img').width() +'; height: ' + $('#img').height() ); })
您还可以检查容器大小是否大于原始图像大小。