html - 使用 :hover 调整图像大小/缩放图像

Question

我有一个带有悬停事件的图像。唯一的问题是它不能扩展到更小的尺寸或移动屏幕。我花了很多时间研究并没有发现任何东西。我认为 100% 宽度应该可以解决问题。我肯定错过了什么。

代码笔链接。

请在我的大脑分裂之前提供帮助。另外，欢迎批评。

Answer 1

检查这个：

body, html {
width:100%;
height:100%;
}
.myButtonLink {
background: url("https://dl.dropbox.com/u/5869656/Caroline%20Ziv/Home-test3.jpg") no-repeat scroll 0 0 transparent;
border: 10px solid #FFFFFF;
box-shadow: 1px 1px 2px #E6E6E6;
display: block;
height: 100%;
text-indent: -99999px;
width: 100%;
background-size: 100%;
}
.myButtonLink:hover {
background: url("https://dl.dropbox.com/u/5869656/Caroline%20Ziv/Home-test5.jpg") no-repeat scroll 0 0 transparent;
border: 10px solid #FFFFFF;
box-shadow: 1px 1px 2px #E6E6E6;
background-size: 100%;
}

也将下面的 css 应用于您在 iframe 中加载的页面。

body, html {
width:100%;
height:100%;
}

希望它会有所帮助

Answer 2

请执行下列操作：

• 适用max-width: 100%;于img
• 消除text-indent: -9999px;
• 去掉背景图片div