7

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

这是 HTML 视图：http: //jsbin.com/emojeg/2

请参阅此处的代码：http: //jsbin.com/emojeg/2/edit

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

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

4

4 回答 4

5

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

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

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

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

于 2013-04-22T09:58:20.760 回答
4

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

首先使用百分比设置图像宽度和高度，为边缘周围的框架留出足够的空间，并使用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% 并将高度设置为自动的媒体查询肯定不起作用。

举个例子，当屏幕宽度小于 600 像素时，您可以使用如下查询将图像缩小一半：

@media screen and (max-width: 600px) {
    ul.mrpv_slider li div.image_container {
        height:162px
        width:125px;
    }
}
于 2013-05-05T01:02:12.183 回答
1

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

于 2013-04-30T12:07:05.083 回答
1

好吧，我使用 twitter bootstrap 和http://responsiveimg.com/来使图像响应并根据屏幕和图像大小固定纵横比。

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

于 2013-05-04T15:36:01.493 回答