Question

我正在网站上工作，并希望在欢迎屏幕上垂直居中此翻转图像。图像是水平100％但垂直太短，所以我希望两边都能获得相等的空间。谁能帮我？下面是欢迎屏幕的链接：

http://www.gimmicinc.com

提前致谢。

对不起，可能不需要预加载代码，但这里只是以防万一：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GiMMiC</title>

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
body {
    overflow-y:hidden;

}
</style>
</head>
<center>
  <body onload="MM_preloadImages('http://i1055.photobucket.com/albums/s519/deepsoulvision/gimmic2000rollover_zps9d73f3a5.jpg')"><a href="www.gimmicinc.com/product/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','http://i1055.photobucket.com/albums/s519/deepsoulvision/gimmic2000rollover_zps9d73f3a5.jpg',1)"><img src="http://i1055.photobucket.com/albums/s519/deepsoulvision/gimmic2000main_zpse8da217b.jpg" style="vertical-align:middle" alt="ENTER" name="Image1" width="100%" height="100%" border="0" id="Image1" /></a>
  </body>

Answer 1

如果您在IE8中不需要完美的支持，那么通过将图像设置为CSS中的背景并使用background-size属性来缩放它将很容易实现。例如：

#bg {
  display: block;
  height: 1000px;
  height: 100vh;
  width: 100%;
  background: url('http://i1055...1.jpg') center center / cover no-repeat;
}
#bg:hover {
  background-image: url('http://i1055...rollover.jpg');
}

然后你的标记看起来像这样：

<a id='bg' href='/home.html'></a>

如果你只需要预加载那个图像，那么可以通过一行JS轻松完成：

<script>var img = new Image(); img.src='http://i1055...rollover.jpg';</script>

或者可能使用灰度滤镜代替翻转图像（http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html）

垂直居中翻转图像？

1 个答案: