javascript - 自动调整div的大小

Question

我想根据背景图像的大小自动调整 div 的大小。

用 css 可以吗？

我还需要使用 jquery 更新背景图像。

到目前为止我有:Resize div

更新:JSFiddle 链接:Updated Link将 hand 放在图像元素上方而不是为 div 设置背景图像是否更容易？

Answer 1

使用 css 没有目前没有办法做到这一点，您可以使用 javascript 来做到这一点，如下所示。

设置背景图片

$("#yourdiv").css("background-image", "your url");

要获得背景图像的高度或宽度是一个真正的痛苦，这样的事情应该可行

$.fn.getBgImage = function(callback) {
    var height = 0;
    var path = $(this).css('background-image').replace('url', '').replace('(', '').replace(')', '').replace('"', '').replace('"', '');
    var tempImg = $('<img />');
    tempImg.hide(); //hide image
    tempImg.bind('load', callback);
    $('body').append(tempImg); // add to DOM before </body>
    tempImg.attr('src', path);
    $('#tempImg').remove(); //remove from DOM
};


// usage
$("#background").getBgImage(function() {
    console.log($(this).height());
});