使用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%以使其適合容器）