Jquery 响应式设计：如何调整图像/背景图像的大小并垂直对齐div？

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

以下是HTML视图：

请参见此处的代码：

对于800px和1100px之间的屏幕宽度，我想调整图像的大小。对于低于800px的任何东西，我想垂直对齐图片框-每行1或2个，无论屏幕宽度允许

---

当前，当我将浏览器调整到较窄的宽度时，最多有2个帧会环绕到下一行，但如果我继续调整大小，则相框的背景似乎会被切断，一些图像似乎会消失。不确定如何修复此问题。

这是因为您使用的滑块具有绝对定位负载和固定的宽度/高度。我建议使用一些实际响应性很强的东西，比如Flexslider（）

但是如果不想这样做，可以从.mrpv_容器类中删除位置：relative和fixed height--

---

CSS的其余部分可能也需要清理，但这会产生预期的效果吗

我也一直在尝试响应式设计，发现Twitter的“引导”非常有用。它只有3个文件，我用它建立了我所有的网站。如果您还没有这样做，请查看：

我已经使用了twitter引导，并根据屏幕和图像大小调整了图像的高宽比

---

如果您使用的是图像滑块，那么jquery bxslider也非常有帮助

让您的图像和背景正确调整大小，我建议进行以下更改

首先用百分比设置图像的宽度和高度，为边缘周围的帧留出足够的空间，并使用

position:relative

添加距顶部的百分比偏移，而不是设置边距。你不必担心水平位置，因为它已经居中了，除非你想稍微调整它来解释你的帧图像不是完全均匀的事实

ul.mrpv_slider li div img {
    position:relative;
    top:11%;
    width:67%;
    height:78%;
}

然后将

background size:100%100%

添加到*image\u container*中，这样帧的背景图像也会调整大小以匹配容器

ul.mrpv_slider li div.image_container { 
    text-align:center;
    background-image:url(http://i36.tinypic.com/5feusn.png);
    background-position:bottom;
    background-repeat:no-repeat;
    margin-right:10px;
    display:inline-block;
    zoom: 1;
    *display: inline;
    height:324px;
    width:250px;

    /* this is the line you need to add */
    background-size:100% 100%;
}

此时，您可以在媒体查询中覆盖容器的宽度和高度，图像和帧都将进行适当的调整

我不确定随着窗口大小的改变，您打算对布局做什么，但您当前的媒体查询将宽度设置为100%，高度设置为自动，这肯定行不通

例如，当屏幕宽度小于600px时，您可以使用如下查询使图像大小减半：

@media screen and (max-width: 600px) {
    ul.mrpv_slider li div.image_container {
        height:162px
        width:125px;
    }
}

---

关于Flexislider，不，我不能使用它，因为我试图实现的目标有点不同。你的CSS建议似乎在某种程度上有效。它以较窄的浏览器宽度垂直对齐div。我想我仍然需要做一些清理，让它看起来更好。你知道为什么我的图片和背景图片没有调整大小吗？还有一件事。。。如果我想为移动显示器创建不同的标记，该怎么办？例如，在移动设备上，如果我想一次显示一个图片帧而不是4个，我必须更改整个标记。我如何做到这一点？我认为光靠媒体查询是做不到的。有什么建议吗？你想达到什么效果？如果你想调整图像的大小，你必须从img{}CSS中删除max width:100%，并将其改为just width:100%。至于移动设备，我是否正确地认为您希望它在桌面上是一个四向上的滑块，但在移动设备上一次只显示一个项目？在这种情况下，将

max width

更改为

width

似乎不起作用。这似乎破坏了形象。我认为这是因为图像的父div设置了固定的宽度。但是如果我没有将其设置为固定的宽度或高度，背景图像将不会出现。我仍然无法理解这一点。在我的例子中，除了图片之外，还有一些背景图片。是的，你对移动设备的看法是正确的。在更宽的屏幕上，我希望所有的四个图片框同时显示，但在窄屏幕上（带有纵向显示的移动设备），我希望一次将滑块转换为一个项目。我知道这可能需要调整HTML标记本身。我可能需要重新创建布局。我只是不知道如何处理这个问题——媒体查询是否足够，或者我是否需要使用jQuery来实现这一点，或者是否需要为移动设备加载一个完全不同的HTML文件。实际上，你没有调整图像的大小，是吗？当我缩小我的浏览器时，我看不到大小调整，只有图像movements@Chococroc在上面的url中，没有，我没有调整大小。我尝试在另一个版本中调整它的大小，但是我的绝对div等有其他问题，我发现很难将其转换为响应。好的，只是要确定，在这个示例中，在调整大小时，您只想确保所有内容都进入列，但您想要实现的是列+调整大小，是这样吗？@Chococroc基本上在更宽的屏幕上，当调整大小时，我希望帧和背景按比例调整大小。关于移动横向定位，我希望所有四个相框同时显示。在移动纵向上，我希望将滑块一次转换为一个项目。我知道这可能需要调整HTML标记本身。我可能需要重新创建布局。我只是不知道如何处理这个问题——媒体查询是否足够，或者我是否需要使用jQuery来实现这一点，或者是否需要为移动设备加载一个完全不同的HTML文件。是的，我最初想使用bootstrap，但认为没有它会更容易，因为我的滑块有许多不同层的绝对位置。如果没有别的办法的话，我可能不得不修改

@media screen and (max-width: 600px) {
    ul.mrpv_slider li div.image_container {
        height:162px
        width:125px;
    }
}