Jquery 我在div中的图像不是'；不显示文本？

我正在尝试在导航栏下插入图像。我要么遇到导航栏覆盖图像的问题，要么在最小化移动宽度时图像缩放不正确，要么图像根本不显示。这是我最接近于控制我想要的响应能力的地方。有什么建议吗？我知道所有的div都是0并且需要一个高度，但是如果我给图像添加一个高度，它将不会响应

正文{
背景：银；
}
#第一页{
背景：url(http://oi68.tinypic.com/21entzo.jpg);
背景尺寸：封面；
背景重复：无重复；
利润上限：56px；
}

弗兰克的投资组合





一些文本
一些文本
一些文本
一些文本

我认为您必须为id为#pageOne的

div指定高度，这样它将覆盖屏幕的一部分。
这里我缩放了
#pageOne
相对于视口高度的高度


正文{
背景：银；
}
#第一页{
背景：url(http://oi68.tinypic.com/21entzo.jpg);
背景尺寸：封面；
高度：计算（100vh-56px）；
背景重复：无重复；
利润上限：56px；
}

弗兰克的投资组合





给你：

#pageOne {
    background: url(http://oi68.tinypic.com/21entzo.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 56px;
    height: 100%;
    width: 100%;
}

您需要包含100%的高度和宽度

我知道所有的div都是0，需要一个高度

你已经回答了你自己的问题

div
s没有内容（或除了默认的
position
属性集之外）折叠其高度


告诉我怎么做！
请参见我的JSFIDLE，这里：

解释如下：）


我如何让它看起来，并且仍然是响应的？
你在正确的轨道上，需要设定一个高度。但是，除了使用px值之外，您还可以利用其他度量值和很酷的CSS属性

使用
vh
代替
px
/
em

您只需使用
vh设置
div
的高度，然后使用
背景大小
属性将图像很好地包含在
div
中。像这样：

height: 50vh; // Uses 50% of the viewport height
height: 100vh; // Uses 100% of the viewport height
height: 33vh; // Uses 33% of the viewport height
// And so on...

请注意，某些浏览器（出于某种原因）不支持
vh
测量，您需要提供一个回退值（否则您将回到原点）。我发现使用
em
值高于
vh
值是一种很好的做法，以确保兼容性

例如：

height: 20em; // fall-back value
height: 50vh; // if the browser supports vh, this will be used (overrides the value above)

玩一玩，看看什么
em
/
px
回退值适合您的需要

用图像作为背景填充
div

为了使您的图像能够很好地填充
div
，您可以使用
背景尺寸：cover
，这使得图像在所有屏幕尺寸上看起来都很整洁（在合理范围内-提供了良好的分辨率/质量图像）

然后，您可以在水平方向上设置
盖的位置原点，例如
中心
，垂直方向上设置
中心
；按此顺序（根据您的意愿进行更改）

为您的需求找到最佳来源的最佳方法是播放，并调整浏览器窗口的大小以找到适合您的内容


另请注意：
不要将标题的
边距顶部
设置为与导航栏的“相同”-而是设置身体的
边距顶部
。这将使您无需为每个页面的第一个元素重复使用相同的
页边距顶部：56px…
代码


希望这有帮助

有什么问题，尽管问吧！：）
 
我知道所有的div都是0并且需要一个高度，但是如果我给图像添加一个高度，它将不会响应。
您已经回答了自己的问题。您的
需要一个高度才能显示
背景。添加一个高度并添加
@media
断点，以便根据响应需要进行更改。@Robert C是对的，而且您正在以像素为单位定义边距，这意味着无论屏幕大小（以像素为单位的宽度）如何，边距都将保持不变。移动到“@media”来创建断点，或者更糟糕的是，临时测试解决方案可能会移动到%而不是px。请注意，@Alan，
div
的
边距
位于
px
本身并不是一个问题-它是为了抵消菜单被固定在
50px
的高度，并防止图像/内容在导航下滑动。我建议设置
body
的
padding top
，而不是单个元素（使用固定导航时）。我在下面的回答中解释了这一点：）如果浏览器不支持
vh
（我以前遇到过这种情况），也可以使用
vh
在属性上方的
em
或
px
中设置高度。然后，如果浏览器不支持
vh
，
em
或
px
将用作回退值，而这将不起作用。您将的
高度
/
宽度
设置为
100%
的是什么？很好-截图。。！但仍然没有回答问题--它没有回答问题？你是某种密码警察，需要像这样粗鲁。屏幕视频显示，我在div#pageOne上设置了100%的高度和背景内容。另外，它对请求帮助的那位先生有效。我应该澄清——我问的问题是“wh
height: 20em; // fall-back value
height: 50vh; // if the browser supports vh, this will be used (overrides the value above)

background-size: cover;

background-position: center center; // Set the center of the image as the origin
background-position: center top; // Set the center of the image (left/right) and the top of the image as the origin.