Question

我正在尝试将图像转换为另一个图像，当它悬停在其上时，也会根据浏览器的大小进行缩放。

我到目前为止的css代码是这样的：

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

#a_Cscaleskb{
   width:0px;
   height:0px;
   background:url('../images/a_Cscaleskb_up.gif');
   padding:47px 114px;
}

#a_Cscaleskb:hover {
   background: url('../images/a_Cscaleskb_over.gif');
}

使用html：

 <img id="a_Cscaleskb" src="../../images/a_Cscaleskb_up.gif" alt="" />

这适用于在悬停时更改图像，但当我缩小浏览器时，它不会改变。

我尝试过的另一段代码是：

#a_Cscaleskb{
background:url('../images/a_Cscaleskb_up.gif');
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: contain;
}

#a_Cscaleskb:hover {
background: url('../images/a_Cscaleskb_over.gif');
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: contain;
}

此css在悬停时可以正确缩放，但您可以看到两个图像相互叠加。我知道也可以使用javascript，但我试图避免使用它。非常感谢任何建议。

Answer 1

如果您想根据浏览器大小缩放图像，请使用这个偷偷摸摸的代码：

   img{max-width:100%;width:auto;height:auto}

我在www.busyfeet.rachelgallen.com的图库页面中使用的内容 - 看一看并查看它的实际效果

将鼠标悬停在图像上，同时使用浏览器进行缩放

1 个答案: