CSS - 移动图像调整大小

Question

我目前使用的方法是在HTML表格中添加<img src="A-Button-Image.png" style="width:100%;">，图片大小可以根据屏幕尺寸进行缩放。

但是， A-Button-Image.png 包含两个图像，悬停和正常状态。因此，我想使用background-position来触发翻转效果？有没有办法使用CSS来控制背景位置，但不会失去图像调整大小的能力？我知道还有另一个解决方案是onmouseover＆amp; onmouseout，但我还是喜欢CSS。

由于

Answer 1

有一个background-size属性可满足您的需求。只需将其设置为200％即可获得可伸缩性和可编程性。

See for yourself

你甚至可以在你的精灵中使用两个以上的图像。您只需要将多个图像乘以100％，并将结果放在background-size属性中。

Answer 2

解决方案是将background-size设置为100％，将padding-bottom设置为百分比。