Question

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

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

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

Answer 1

这是因为您使用的滑块具有绝对定位和固定宽度/高度的载荷。我建议使用实际上具有响应性的内容，例如Flexslider（http://www.woothemes.com/flexslider/）

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

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

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

Answer 2

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

首先使用百分比设置图像宽度和高度，为边框周围的框架留出足够的空间，然后使用position:relative从顶部添加百分比偏移，而不是设置边距。您不必担心水平位置，因为它已经居中，除非您想稍微调整一下以解决您的帧图像不是完全均匀的事实。

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

然后将background-size:100% 100%添加到* image_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;
    }
}

Answer 3

我也一直在尝试响应式设计，并发现Twitter的“Bootstrap”非常有用。它只有3个文件，我用它构建我的所有网站。如果您还没有，请查看：http://twitter.github.io/bootstrap/

Answer 4

我使用了twitter bootstrap以及http://responsiveimg.com/来使图像响应并根据屏幕和图像大小修正宽高比。

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

Answer 5

此链接确实帮助了我：http://css-tricks.com/perfect-full-page-background-image/

JQuery方法是我一直使用的，也是最简单的。

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

5 个答案: