你的位置:首页 > 软件开发 > 网页设计 > css图片响应式+垂直水平居中

css图片响应式+垂直水平居中

发布时间:2015-08-12 22:00:07
转载请注明: TheViper http://www.cnblogs.com/TheViper 效果要求:1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了。2.浏览器尺寸变化时,图片总是等比例拉伸或缩放。3.包裹图片的div也是响应式的,并 ...

转载请注明: TheViper http://www.cnblogs.com/TheViper 

效果

css图片响应式+垂直水平居中

要求:

1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了。

2.浏览器尺寸变化时,图片总是等比例拉伸或缩放。

3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的。

4.图片始终保持水平垂直居中。

5.图片的行列数不变,这里一直都是3*3.

下面来搞定一个个要求。

满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级浏览器居中常用的什么

display:table-cell;vertical-align;center;

flexbox

transform

。。。

如果不得不用这些属性,也必须要有兼容低版本浏览器的替代方案。

要求2中图片等比拉伸缩放在响应式设计中很容易搞定。

直接对图片img{max-width: 100%;}就可以了。外面的宽度就算设成比图片宽度小的尺寸,图片会填满外面div,同时等比例的计算出图片这时该有的高度。

css图片响应式+垂直水平居中

可以看到图片尺寸是640*480(4:3),外面div设成300px,图片尺寸这时变为300*225(4:3).

然后是要求2里面的浏览器尺寸变化。这个也容易,把外面div的宽度写成百分百就可以了。

css图片响应式+垂直水平居中

可以看到不管外面div尺寸怎么变,图片的宽高比始终没变。

然后是要求3,外面div响应式。

第一反应是把尺寸设置成百分百。比如最上面的效果,一行有三张图片。把每个包裹图片的div宽度设成33.3%;那这时div还会像里面的图片一样,等比例缩放或拉伸,div的高度就会参差不齐。

css图片响应式+垂直水平居中css图片响应式+垂直水平居中
  <div id='wrap'>    <ul>      <li>        <p><img src='/images/loading.gif' data-original="1.jpg"></p>      </li>            .....    </ul>  </div>

原标题:css图片响应式+垂直水平居中

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。