2

我有一个宽度：自动和高度：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）。

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

4

4 回答 4

2

这是您原始小提琴的更新：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;
}
于 2012-09-26T13:02:16.940 回答
1

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

于 2012-09-26T10:21:18.847 回答
0

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

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

于 2012-09-26T11:01:40.620 回答
0

借助div.containerjQuery 的一点点帮助，您可能会相处得很好。

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

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

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

于 2012-09-26T12:24:57.143 回答