我正在尝试响应式设计.我的图片目前尚未调整大小.在我的标记中,我还将背景图像应用于需要调整大小的某些div.
这是HTML视图：http://jsbin.com/emojeg/2
请参阅此处的代码：http://jsbin.com/emojeg/2/edit
对于800px和1100px之间的屏幕宽度,我想调整图像大小.对于800px以下的任何东西,我想垂直对齐相框 – 无论屏幕宽度允许,每行1或2行.
目前,当我将浏览器的大小调整为更窄的宽度时,最多2个框架将换行到下一行,但如果我继续调整大小,则相框的背景似乎会被切断并且一些图像似乎消失了.不知道如何解决这个问题.
解决方法
为了正确调整图像和背景,我建议进行以下更改.
首先使用百分比设置图像宽度和高度,为边框周围的框架留出足够的空间,并使用position：relative从顶部添加百分比偏移而不是设置边距.你不需要担心水平位置,因为它已经居中,除非你想稍微调整它以解决你的帧图像不是完全均匀的事实.
ul.mrpv_slider li div img {
position:relative;
top:11%;
width:67%;
height:78%;
}
然后将背景大小：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绝对不会起作用.
但是,作为一个例子,当屏幕宽度小于600px时,您可以将图像调整为一半,并使用如下查询：
@media screen and (max-width: 600px) {
ul.mrpv_slider li div.image_container {
height:162px
width:125px;
}
}
