Question

我正在尝试复制Google在其主页上显示背景图片的方式。基本上这是我的代码重写它：

<img style="width: 1279px; height: auto; left: 0px; opacity: 0.99999;" src="<?php echo    $_COOKIE['otakuplus_bg']; ?>" id="cpBackgroundImg">

问题在于，如果你看看Googles主页，他们实际上得到了图像的尺寸，所以在这种情况下，我的宽度是1279px而高度是自动的。

这是因为我手动输入了CSS。然而，谷歌似乎以不同的方式获得相同的数据;可能是通过JS。

所以，他们的数据将是：

width: 1279px; height: 959.25px;

...对于相同的图像。我必须依靠汽车的高度。如果你知道我可以用jQuery做到这一点，请告诉我。提前谢谢。

Answer 1

使用JQuery：

该元素的宽度

var imgWidth = $("#cpBackgroundImg").width();
alert(imgWidth);

该元素的高度

var imgHeight = $("#cpBackgroundImg").height();
alert(imgHeight);

现在你应该希望在JQuery中存储宽度和高度，你可以用它做你想做的事。 http://jsfiddle.net/robx/BHyLJ/

Answer 2

这是我如何输出适合用户窗口的准备好的图片。

步骤：

获取窗口的宽度和宽度高度并将其存储在
中
```
container_height and container_width
```

使用jQuery和TimThumb PHP库。 TimThumb可以动态生成调整大小的图像，同时缩放裁剪不符合给定大小的部分。

$('#container').css('background','url(timthumb.php?src=image_source.jpg&w=' +   
container_width + '&h=' + container_height + '&zc=1');

它的作用是将id =“container”的元素的css background属性更改为timthumb生成的图像。

你可以在这里得到TimThumb：http://code.google.com/p/timthumb/

顺便说一句。在我的代码中，我还添加了一个预加载器，以确保背景在完全加载时变得可见。

Answer 3

在加载图像之前，您无法知道图像的高度和宽度。所以说你的形象是这样的：

<img src="foo.jpg" id="foo">

你可以在jQuery中执行此操作：

var img = jQuery("#foo");
if (img.attr("complete")) {
    // Comes from the cache so no load event will fire
    alert("width = " + img.width());
} else {
    img.load(function() {
        alert("width = " + img.width());
    }
}

jquery获取图像大小并将其显示在img src标记中

3 个答案: