使用jQuery相对于用户屏幕尺寸缩放图像

Question

我知道以前已经回答过类似的问题，但我找不到确切的答案。

我正在尝试在此页面上重新创建页脚图像。 我已经完成了悬停效果，但是无法将图像缩放到与该网站上的图像相同的大小。

有人对如何获得完全相同的图像有任何想法吗？

这就是我在jsdfiddle中的功能 （由于某种原因，悬浮效果在jsfiddle中不起作用）。 以下代码是我正在使用的代码

$(".img_Fade").hover(
  function () {
    $(this).fadeTo("slow" , 1);
  },
  function () {
   $(this).fadeTo("slow" , .5);
  }
);

Answer 1

我在您的小提琴中添加了jQuery（这就是衰落不起作用的原因），并添加了overflow: hidden在您的三个<div>元素中。 这将隐藏图像的溢出部分。

您还需要它们随屏幕高度缩放吗？

http://jsfiddle.net/borglinm/3fmPU/1/

Answer 2

使用以下CSS：

.insideDiv1:hover, .insideDiv2:hover, .insideDiv3:hover{
opacity:1.0;
}

.insideDiv1{ background-color: blue;}
.insideDiv2{ background-color: orange;}
.insideDiv3{ background-color: green;}

.insideDiv1, .insideDiv2,.insideDiv3 {
  opacity:0.5;
  float: left;
  background-color: blue;
  width: 33%;
  height: 100%;
  border: 0px;
  margin: 0px;
  padding: 0px;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}

希望这可以帮助..

Answer 3

您不需要javascript / jquery：

这是您更新的小提琴=> http://jsfiddle.net/LxcVv

我只是在.img_fade类上添加了一个悬停状态，并使用了CSS过渡：

.img_Fade {
    opacity:0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    width: 100%;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out;
    -webkit-backface-visibility: hidden; /* to fix chrome moving image issue */
}

.img_Fade:hover {
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

（我还将图像width设置为100%以使其适合容器）