html - 确保 div 为 100% 宽度，而不会破坏菜单

Question

首先，我是新手，所以请多多包涵。

我已经为 my site. 实现了一个非常酷的“滚动脚本淡入淡出”

但是，我想要做的是在顶部跨度 100% 宽度的图像，如 fastcocreate's网站。

这是我正在使用的 div:

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% 560px;"> 
</div> 

现在我尝试添加“背景大小:100% 自动；”到 div，它可以解决问题，除了这会对我的文本造成奇怪的影响。例如，如果我让浏览器更 slim ，文本就不会随之移动——所以我放弃了这个想法。

接下来我将其更改为“背景大小:100% 560px；”解决了这个问题。但是创建的另一个是当您缩小浏览器时图像会被压扁，或者当我将浏览器变宽时图像会被拉伸(stretch)。

我觉得我更接近上面那个，但我正在寻找拉伸(stretch)图像问题的解决方案。我是否需要上传比当前尺寸更大的图片？

正如我之前所说 these guys做好。

Answer 1

看来 fastocreate 为他们的图像设置了最小宽度，您是否尝试过

min-width: 100%;
height: auto;

?

我很确定这就是 fastocreate 所做的

最好的，-b

*此外，请尝试在您的浏览器上启用“检查元素”。它在尝试模仿某人的风格时非常有帮助。

编辑:

作为对您评论的回应，您可以尝试制作一个 jQuery 函数来调整它的大小。

例如

function resize(){
  var height = $('img').width / 2; //sets variable height to the width divided by 2
  $('img').height(height); // sets the value of the height to the variable height
};

或类似的东西。