响应式水平布局答案

【问题标题】：Responsive Horizontal Layout响应式水平布局
【发布时间】：2012-09-27 00:15:05
【问题描述】：

我有一个宽度：自动和高度：100% 的水平布局，但主体或容器不会拉伸以保持图像的纵横比。

我需要在这个附加图片中看到这样的布局：

我将使用这些图像作为面板 div 的背景。

这是我的代码：

HTML

 <body>
      <div id="cover" class="panel">
      <img src=""/>
      </div>
      <div id="panel1" class="panel">
      <img src=""/>
      </div>
      <div id="panel2" class="panel">
      <img src=""/>
      </div>
      <div id="panel3" class="panel">
      <img src=""/>
      </div>
      <div id="panel4" class="panel">
      <img src=""/>
      </div>
 </body>

CSS

* {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    width: auto;
    height: 100%;
}

.panel {
    width: auto;
    height: 100%;
    float: left;
}

.panel img {
    width: auto;
    height: 100%;
    z-index: -1;
}

你也可以在jsfiddle看到它。

我将 .panel 浮动到左侧，因此它将全部水平显示，但容器无法容纳所有面板的宽度，它们只是堆叠在一起。

注意：我不想修复，我需要它来响应。

这是我想要完成的示例 (jsfiddle)。

如您所见，没有垂直滚动条，只有水平滚动条显示，当您调整视口大小时，图像会调整其宽度和高度并保持其纵横比。

【问题讨论】：

标签： html css layout

【解决方案1】：

这是您原始小提琴的更新： http://jsfiddle.net/rsPRz/45/

尽量与原始代码保持一致...

HTML

<html>
<body>
    <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-cover.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-2.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-1.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-1.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-2.jpg"/>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}

img {
    display: inline-block;
}

【讨论】：

是的！但是，img 中不再包含 div。我需要一个 div，因为我必须在里面放一些文本。
它与容器的工作方式相同，但具体取决于您添加文本的位置以及文本是否应该与图像一起移动。能举个例子吗？
嗨，大卫，谢谢。但是你能看看我在这个 jsfiddle 中做错了什么：jsfiddle.net/iamthestig/69kgt？我想将此小提琴中的#cover-section 与图像重叠。
这是我绝对定位文本的更新。 jsfiddle.net/69kgt/15

【解决方案2】：

我认为你需要将它们全部保存在一个父 div 中，其宽度和高度将等于窗口的宽度和高度

【讨论】：

没有。我不希望它们适合浏览器的宽度。我希望主体能够容纳所有图像的宽度。
即如果有 4 张 1000px 的图片，你想一次在屏幕上显示它们吗？
没有。当用户水平滚动时，我希望它们一次显示一个。即图像为 1280 x 800，如果浏览器尺寸为 1600 X 900，则图像必须调整大小以适应更大的屏幕尺寸，并保持其纵横比。就像我在这里的例子：jsfiddle.net/iamthestig/cJUQa
很抱歉，这不是我的目标...我希望它们具有真实的纵横比，而不是像您的示例中那样扭曲的纵横比。请参阅我附上的布局图像。它必须是可滚动的。
好吧，我的意思很接近。但是现在图像之间有一个间距。你能做到没有间距吗？我有另一种方法的新jsfiddle。完成后我会发布它。我真的很高兴你知道 javascript，因为我刚刚开始使用 javascript。谢谢你帮助我，真的很感激。

【解决方案3】：

您展示的示例工作正常，因为它只有一个图像。当您使用多个图像/div 时，您应该将 div 的宽度平分，并将@987654323@ 分配给其中的图像。

例如，我只使用了 4 个 div。查看此演示http://jsfiddle.net/rsPRz/34/

【讨论】：

在您的示例中，容器 div 将恰好适合浏览器窗口，水平滚动现在已关闭。我希望它是可滚动的。各个 div 必须在其中包含 img 的宽度和高度，并保持它们的纵横比。如果您可以在此示例中向左浮动 div：jsfiddle.net/iamthestig/rsPRz

【解决方案4】：

有了div.container 和一点 jQuery 的帮助，你可能会相处得很好。

更新链接：http://jsfiddle.net/rsPRz/37/

widthSum = 0;
$('.panel img').each(function() {
   widthSum += $(this).width(); 
});
$('.container').width(widthSum);

这对您来说是一个可行的解决方案吗？

【讨论】：

如果您还需要在调整窗口大小时调整布局，则必须将 js 代码包装到一个函数中并添加类似于此$(window).resize(function(){ adjustLayout();});的回调
问题是div之间有间距。
只有在调整窗口大小后才会出现间距，对吧？至少在我的 chrome 浏览器中是这样的。我为这种情况添加了一个回调：jsfiddle.net/rsPRz/46 在调整大小时您仍然可以看到一些闪烁，但我认为仍然可以称之为响应式。
奇怪的是，当浏览器调整大小时，水平布局会中断，并且会出现垂直滚动并且图像堆叠在一起。
嗯，确实很奇怪。刚刚在 Chrome、Firefox 和 Safari 中测试了最后一个链接，它似乎在这里工作。但也许大卫科拉尔的答案是要走的路，因为它不需要任何 javascript。