欢迎来到HTML5中文学习网! 
  • 首页
  • html5教程
  • 网站及特效实例
  • 教程视频
  • html5资讯
  • bootstrap
  • HTML5演示
  • HTML5论坛
  • VMiddleImg图片居中裁切效果

    2012-05-31 来源/作者:HTML5中文学习网 分类:图片特效 «»
    VMiddleImg图片居中裁切效果 VMiddleImg图片居中裁切效果

    对于正规性的网站来说,图片都是要经过处理才上传到页面上去的,但是一般的企业或是小行业网站,编辑又怎么会去处理下图片的尺寸呢,最多也就是改一下水印。所以上传到网站上后显示出来的图片就感觉像是变了形,大小不一,长宽不一,一点也不美观。

    VMiddleImg可以实现图片居中而且还可以缩放、居中、裁剪(当然不是真正意义上的裁剪,只是把不显示的隐藏起来了)。

    此脚本拟达到以下需求:

    1、当图片高或宽超过父容器时截取中间部分显示。

    2、当图片宽高小于父容器时,居中显示。

    3、插件中”width”和”height”两个参数可以设定图片实际输出的宽度。

    4、可以通过样式设置图片的偏移位置,例如.themes2 li a img{ margin-top: -5px; margin-left: -5px};

    5、第3点和第4点结合可以尽可能的解决一个问题,就是解决图片边缘模糊是造成视觉上的不爽。

    不爽之处:

    1、图片上要加上width和height

    2、无预加载效果

    HTML5中文学习网搜集整理

    标签:图片特效