Javascript 使用jQuery缩放相对于用户屏幕大小的图像

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

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

有人知道如何让图像看起来完全一样吗

以下是我的内容（由于某些原因，悬停效果在JSFIDLE中不起作用）。下面的代码是我用于ho的代码

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

---

我将jQuery添加到您的小提琴中（这就是淡入不起作用的原因），并将

overflow:hidden

添加到您的三个

元素中。这将隐藏图像的溢出部分

您是否也需要它们与屏幕高度成比例

使用以下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 */
}

---

希望这有帮助。

您不需要javascript/jquery：

这是您的最新小提琴=>

我刚刚在你的

.img\u 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%

以使其适合容器）

您应该将相关代码与您的Fiddle一起发布此网站是为了帮助编码，而不是让每个人都为您做作业。使用CSS屏幕百分比-可能与jQuery一起使用。这不是“作业”就我所知，jquery是代码吗？我只是问是否有人知道一种方法来做我需要的事情。哇，那当然要容易得多。然而，我现在注意到，每当任何图像悬停在上方时，中心图像都会稍微向左移动。有什么重要原因吗？已修复：-这是一个chrome问题，您可以通过添加

-webkit背面可见性：隐藏到你的图片课：看（我编辑了我的答案）谢谢，太好了。我希望得到与我链接的网站上的图片完全相同的图片。缩放高度和宽度。