html - CSS 中的全高、可变宽度图像

Question

我已经在这个网站上工作了很长一段时间，但仍有一些问题。这是布局:

• 顶部导航栏:68 像素高，全宽，固定在顶部。
• 底部导航栏:42 像素高，全宽，固定在底部。
• 内容:具有各种宽度的全高图像，向左浮动。

内容导航仅通过水平滚动完成。图像填满从顶部导航栏底部到底部导航栏顶部的整个高度非常重要，并且不会以任何方式被裁剪或遮挡。调整浏览器窗口大小或旋转移动设备不会破坏此布局也很重要。我当前的代码在 Chrome 和 Safari 中完美运行(有一个 caveat )，但在 Firefox 和 Opera 中失败得很惨。我还没有在 IE 中测试过。这是我正在做的:

#header {
  width: 100%;
  height: 68px;
}

#content {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 42px;
  z-index: -10;
  width: auto;
  height: auto;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

#content #frame {
  max-width: 80000px; /* (To ensure that there's enough horizontal space for images) */
}

#content #frame img {
  height: 100%;
  width: auto;
  float: left;
  margin-right: 5px;
  position: relative;
  z-index: 100;
}

#footer {
  width: 100%;
  height: 42px;
  position: absolute;
  bottom: 0;
}

所以我实际上做的是在一个窗口内创建一个窗口，然后在该窗口内滚动，这就是导致 problem 的原因。在我上面提到的 Safari 中。除此之外，这完全符合我在 Chrome 和 Safari 中想要的方式。在 Firefox 和 Opera 中，图像不会缩放到窗口的高度。

要亲自查看该站点，请转到此处:http://peter-block.com/preface/ .密码是“letitrain”。

我在想的是一起取消“窗口中的窗口”是最好的(简单并修复 Safari 问题)，但我似乎无法找到一个在所有方面都能按我想要的方式工作的解决方案浏览器。任何帮助将不胜感激。

Answer 1

工作 fiddle ，根据新输入更新: http://jsfiddle.net/XkrQg/5/

将 height: 100%; 添加到 #content #frame

#content #frame {
    height: 100%;
}

JS部分:
将此添加到loadImages() 的开头

var frameWidth = 0;

并将其添加到 loadImage()

    img.onload = function () {
        frameWidth += img.width + 5; //5 is for margin-right:5px; on img in css
        $('#frame').css('width', frameWidth);
    }

该解决方案在加载图像时动态计算 #frame 的宽度。

添加此以在调整窗口大小时重新计算新宽度:

$(window).resize(function () {
    var frameNewWidth = 0;
    $('#frame img').each(function () {
        frameNewWidth += $(this).width() + 5;
    });
    $('#frame').css('width', frameNewWidth);
})
    .resize();

如果需要，您可以在图像加载期间通过 overflow-x:hidden; 隐藏垂直滚动条。