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

2016-02-20 00:42 50 1 收藏

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

【 tulaoshi.com - Web开发 】

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

原文连接:

(本文来源于图老师网站,更多请访问https://www.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

来源:https://www.tulaoshi.com/n/20160220/1632408.html

延伸阅读
标签: Web开发
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。 CSS使图片垂直居中的代码: !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" lang=&quo...
做为一个前端设计人员,对于产品展示页面的设计一定不会陌生,其中产品图片摆放是必定经历的一步,并且水平居中和垂直居中又是最多的。有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便...
标签: Web开发
用Table布局可以很容易的实现文字和图片的垂直居中,但是在div的布局中呢,要实现定高容器里面的内容的垂直居中不是太简单的事情。 在DOM标准中 在IE中 综合 #boxOuter {     display:table;     height:300px;     width:500px;     border:solid 1px black;   &n...
标签: Web开发
网页制作,用CSS实现图片垂直居中方法 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"style type="text/css"!--body {margin:0;padding:0}div {width:500px;height:500px;line-height:500px;border:1px solid #ccc;overflow:h...
标签: Web开发
经过今天一翻改进,终于找出了解决DIV垂直居中的办法。 !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/ht...

经验教程

869

收藏

21
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部