jquery - 响应式设计 : How to resize images/background images and align divs vertically?

Question

我正在尝试响应式设计。我的图片目前没有调整大小。在我的标记中，我还将背景图像应用于某些需要调整大小的 div。

这是 HTML View :http://jsbin.com/emojeg/2

请在此处查看代码:http://jsbin.com/emojeg/2/edit

对于 800 像素到 1100 像素之间的屏幕宽度，我想调整图像的大小。对于低于 800 像素的任何内容，我想垂直对齐相框 - 无论屏幕宽度是否允许，每行 1 或 2 个。

目前，当我将浏览器调整为更窄的宽度时，最多 2 个框架会换行到下一行，但如果我继续进一步调整大小时，相框的背景似乎被切断并且一些图像似乎消失了。不确定如何解决这个问题。

Answer 1

这是因为您使用的 slider 具有大量绝对定位和固定宽度/高度。我建议使用实际响应的东西，比如 Flexslider ( http://www.woothemes.com/flexslider/ )

但如果你不想那样做，你可以从 .mrpv_container 类中删除 position:relative 和固定高度 --

.mrpv_container {
    width: 100%;
    height: 710px;
    position: relative;
    overflow: hidden;
}

其余的 CSS 可能也必须清理，但这是否会产生预期的效果？