我有一个水平布局，宽度:自动，高度:100%，但主体或容器不会拉伸(stretch)以保持图像的长宽比。
我需要的布局如下所示:
我将使用这些图像作为面板 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 )。
正如您所看到的，没有垂直滚动条，仅显示水平滚动条，当您调整视口(viewport)大小时，图像会调整其宽度和高度并保持其纵横比。
最佳答案
这是您原始 fiddle 的更新: 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;
}
关于html - 响应式水平布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12599357/