Question

我有一个悬停事件的图片。唯一的问题是它不能扩展到更小的尺寸或移动屏幕。我花了很多时间研究，但没有找到任何东西。我认为100％的宽度应该已经完成了。我一定错过了什么。

请在我的大脑分裂之前帮忙。批评欢迎。

Answer 1

执行以下操作：

将max-width: 100%;应用于img
删除text-indent: -9999px;
删除div

Answer 2

检查一下：

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%;
}

希望它会有所帮助

使用以下内容调整图像大小/缩放：悬停

2 个答案: