1

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

代码笔链接。

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

4

2 回答 2

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

希望它会有所帮助

于 2013-02-13T05:08:35.170 回答
1

请执行下列操作：

  • 适用max-width: 100%;于img
  • 消除text-indent: -9999px;
  • 去掉背景图片div
于 2013-02-13T01:44:00.153 回答