Javascript 美食家是如何实现这种背景图像效果的？

我很好奇Foodily.com是如何实现这种背景效果的？（无论浏览器大小如何调整，背景都会被拉伸并看起来很好）

---

嗯。背景对我来说不太合适。（铬）。

---

也许你说的是以内容为中心？然后使用position:absolute。

这是一个高分辨率图像（1446x960）。它们不会缩小，只会向上缩放（如果浏览器尺寸小于图像，则只会剪裁图像）。如果将浏览器的大小调整为大于图像，它会开始拉伸图像，然后不再像图像那样清晰。

这是一个1920 x 1200的图像，因此会影响图像在不同分辨率下的外观。之后，CSS告诉img标签的宽度为100%。因此，当您拉伸浏览器时，图像将确保100%处于该位置。它们还设置了最小宽度，以确保图像宽度不小于1600px。

它们保留

---

与我们在电脑上的操作方式相同

function resize_bg（）{
$（“#bg”）.css（“左”，“0”）；
$（“#bg top”）.css（“左”，“0”）；
var doc_width=$（窗口）.width（）；
var doc_height=$（窗口）.height（）；
var image_width=$（“#bg”）.width（）；
var image_height=$（“#bg”）.height（）；
var图像比=图像宽度/图像高度；
var new_width=单据宽度；
var new_height=数学圆（new_width/image_ratio）；
var瓶子宽度=$（“#瓶子”）.width（）；
如果（新高度（960+（瓶宽+15）））{
$（“#瓶”）.css（{“右”：0}）；
}否则{
$（“#瓶子”）.css（{“右”：（（doc_width-960）-（瓶子宽度+15））；
}
$（“#背景顶部”）。宽度（新的#U宽度）；
$（“#背景顶部”）。高度（新高度）；
$（“#bg”）.宽度（新宽度）；
$（“#bg”）.高度（新高度）；
}

css

function resize_bg(){
 $("#bg").css("left","0");
 $("#bg-top").css("left","0");
 var doc_width = $(window).width();
 var doc_height = $(window).height();
 var image_width = $("#bg").width();
 var image_height = $("#bg").height();
 var image_ratio = image_width/image_height;      
 var new_width = doc_width;
 var new_height = Math.round(new_width/image_ratio);
 var bottle_width = $("#bottle").width();
 if(new_height<doc_height){
  new_height = doc_height;
  new_width = Math.round(new_height*image_ratio);
  var width_offset = Math.round((new_width-doc_width)/2);
  $("#bg").css("left","-"+width_offset+"px");
  $("#bg-top").css("left","-"+width_offset+"px");      
 }

 if(doc_width>(960+(bottle_width+15))){
  $("#bottle").css({"right":0});
 }else{
  $("#bottle").css({"right":((doc_width-960)-(bottle_width+15))});
 }
 $("#bg-top").width(new_width);
 $("#bg-top").height(new_height);
 $("#bg").width(new_width);
 $("#bg").height(new_height);

 }

标记

img {
  width:100%;
  min-width:1600px;
  z-index:0;
  min-width:100px;
}

html, body {
  height:100%;
  min-width:100px;
}

body {
  margin:0;
  padding:0;
}

基本上，他们正在为图像设置一个最小宽度，所以它至少需要这个大小，但可以在宽度为100%的情况下增长

---

可能会让人大吃一惊的是，它不是元素的背景图像，而是一个实际的img标签，设置为显示在所有内容下。

他们所做的是一个假背景图像：

<img id="bg" src="http://foodily.com/images/BG_grapes.jpg"/>

仅适用于某些浏览器，请尝试backstretch for jQuery以完成相同的任务：

---

该解决方案将与更广泛的设计、浏览器等配合使用。

为了完成背景，他们使用了一个大的图形文件，这样一来，它就占据了大部分用于查看页面的屏幕大小。图形文件放置在固定位置div中，设置为宽度的100%，并设置为最底层（z-index 0）。即使在滚动时，也是固定位置将图形保持在适当位置，并创建良好的效果

---

然后，所有其他内容都显示在背景图像层的顶部。如果您的浏览器实际渲染的屏幕尺寸大于图像，则浏览器会拉伸图像以适应需要（同样，它会约束大于img标记所列尺寸的图像）。

它也不会在此处拉伸-这是一张大照片，分辨率较低的照片只会显示其中的一部分。也许有一个大屏幕的人可以帮忙：）@Konerak:：）我知道下面的IE8不完全支持最小宽度。

<img id="bg" src="http://foodily.com/images/BG_grapes.jpg"/>

<div id="rotate_bg" style="display: block; "><img id="rotate_bg_img" src="/images/BG_peaches.jpg"></div>