html - ：hoverを使用して画像のサイズを変更/拡大縮小します

Question

ホバーイベントのある画像があります。唯一の問題は、小さいサイズやモバイル画面に拡大縮小されないことです。調査に多くの時間を費やしましたが、何も見つかりませんでした。私は100％の幅がトリックをするべきだったと思いました。私は何かが欠けているに違いありません。

Codepenリンク。

私の脳が分裂する前に助けてください。また、批判も歓迎します。

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

それが役立つことを願っています