Question

我有一个水平布局，宽度为：auto和height：100％，但是主体或容器没有伸展以保持图像的宽高比。

我需要的布局如下图所示：

enter image description here

我将使用这些图像作为面板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）。

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

Answer 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;
}

Answer 2

我认为您需要将所有这些内容保存在父div中，其宽度和高度将等于窗口宽度和高度

Answer 3

您显示的示例工作正常，因为它具有单个图像。当您使用多个图像/ div时，您应该为div平均分配宽度，并将max-width:100%赋予其中的图像。

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

Answer 4

使用div.container和jQuery的一点帮助你可能会相处。

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

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

这可能是您的解决方案吗？

响应水平布局

4 个答案:

HTML

CSS