js+css图片自动等比例缩小且垂直居中

秦海得

秦海得

2016-02-20 00:42

下面图老师小编跟大家分享一个简单易学的js+css图片自动等比例缩小且垂直居中教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

原文连接:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  图片自动等比例缩小,其实如果不考虑ie6的话,用css就可以实现,设定img的max-width和max-height,而img标签内不设定widht和height即可。 

  ie7已经支持max-width和max-height,这是为数不多的好消息之一。 但是对于ie6及以前的版本,就只能用js来设置了。 

  在 ff 2.0/ ie6 / ie7 中测试通过。 opera 8.5 cn 垂直居中未通过,正在研究[貌似opera下如果只有图片行高会失效]。希望大家来测试。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
html xmlns="http://www.w3.org/1999/xhtml" 
head 
meta http-equiv="Content-Type" content="text/html; charset=gb2312" / 
title图片自动等比例缩小且垂直居中/title 
!--[if lte IE 6] 
script type="text/javascript" language="javascript" 
function imgFix() { 
  //定义要限制的图片宽高,这个宽高要同style里面定义的相同,小于限定高宽的图片不操作 
  var widthRestriction = 200; 
  var heightRestriction = 200; 
  var allElements = document.getElementsByTagName('*')   
  for (var i = 0; i  allElements.length; i++) 
  { 
    if (allElements[i].className.indexOf('imgBox') = 0) 
        { 
      var imgElements = allElements[i].getElementsByTagName('img'); 
      for (var j=0; j  imgElements.length; j++) 
          { 
        if ( imgElements[j].width  widthRestriction || imgElements[j].height  heightRestriction ) 
                { 
          if ( imgElements[j].width  imgElements[j].height) 
                  { 
            imgElements[j].height = imgElements[j].height*(widthRestriction/imgElements[j].width); 
            imgElements[j].width = widthRestriction; 
          } else 
                  { 
            imgElements[j].width = imgElements[j].width*(heightRestriction/imgElements[j].height); 
            imgElements[j].height = heightRestriction; 
          } 
        } 
                if ( imgElements[j].height  heightRestriction ) 
                { 
                  imgElements[j].style.paddingTop = ( heightRestriction -imgElements[j].height ) /2 + "px"; 
                } 
      } /*for j*/ 
    } 
  }/*for i*/ 

window.onload = imgFix; 
/script 
![endif]-- 
style type="text/css" 
!-- 
* { 
margin:0; 
padding:0; 

.imgBox li { 
list-style:none; 
width:200px;  /* 宽度 */ 
height:200px; /* 高度 */ 
background:#ccc; 
border:1px solid #666; 
text-align:center; 
margin:5px; 
line-height:200px; 

.imgBox img { 
max-width:200px;  /* 宽度 */ 
max-height:200px; /* 高度 */ 
vertical-align:middle; 

-- 
/style 
/head 

body 
ul class="imgBox" 
  liimg src="......" alt="img" //li 
  liimg src="......" alt="img" //li 
  liimg src="......" alt="img" //li 
  liimg src="......" alt="img" //li 
/ul 
/body 
/html
展开更多 50%)
分享

猜你喜欢

js+css图片自动等比例缩小且垂直居中

Web开发
js+css图片自动等比例缩小且垂直居中

用CSS等比例缩放图片

Web开发
用CSS等比例缩放图片

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

图片预加载并且自动等比例缩放的JS插件

Web开发
图片预加载并且自动等比例缩放的JS插件

JavaScript实现网页图片等比例缩放

Web开发
JavaScript实现网页图片等比例缩放

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 图片预加载 自动等比例缩放插件

Web开发
jquery 图片预加载 自动等比例缩放插件

利用CSS按比例缩小图片

Web开发
利用CSS按比例缩小图片

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

破解Win8/Win8.1下文件夹假死的高招

破解Win8/Win8.1下文件夹假死的高招

windows 8下无线网络流量的查看方法

windows 8下无线网络流量的查看方法
下拉加载更多内容 ↓