使用jQuery根据用户屏幕大小缩放图像

Scaling images relative to users screen-size using jQuery

本文关键字：缩放 图像 屏幕 用户 jQuery 使用      更新时间：2023-09-26

我知道类似的问题以前已经回答过了，但是我找不到我要找的东西。

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

有没有人有任何想法如何让图像看起来完全一样?

这是我在jsdfiddle(由于某些原因悬停效果不工作在jsfiddle)。下面的代码是我对ho

使用的代码
$(".img_Fade").hover(
  function () {
    $(this).fadeTo("slow" , 1);
  },
  function () {
   $(this).fadeTo("slow" , .5);
  }
);

我将jQuery添加到您的小提琴(这就是为什么褪色不起作用)并将overflow: hidden添加到您的三个<div>元素中。这将隐藏图像的溢出部分。

你还需要它们与屏幕高度的比例吗?

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

使用以下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:

这是你更新的小提琴=> 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%，使它们适合它们的容器)

相关文章：