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

Question

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

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

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

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

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

Answer 1

这是因为您使用的滑块具有绝对定位和固定宽度/高度的载荷.我推荐使用实际响应的东西,比如Flexslider(http://www.woothemes.com/flexslider/)

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

.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% 并将高度设置为 auto 的媒体查询肯定不会起作用。

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

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