这是一个具体的问题。
<div id="d_btn">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</div>
这是一个jsfiddle：https://jsfiddle.net/fcjwjutb/
你会注意到它创建了一个图像按钮，它实际上只是一个带有背景图像的div，并且由于单个透明像素的base64数据，宽高比始终是1：1（不同的像素w / h）会给出不同的宽高比）。它会在您悬停时更改图像。
问题是：如果我垂直调整窗口大小，则宽高比会中断。
然而，自动地，如果刷新页面 - 宽高比恢复正常。
我想要的是在调整窗口大小时保持正确的宽高比，而不必刷新。在这个具体的例子中我需要改变什么来实现这个目标？寻找CSS答案，而不是JS。
这里保持宽高比的“技巧”是这样的事实：如果你只设置高度或只设置宽度，那么另一个参数应该自动保持比例，如果涉及到图像，那就是1pixel的用途。我不明白为什么这会在调整大小时中断，但是在最初页面加载时它可以正常工作。
这个问题似乎围绕这样一个事实：当你调整大小时，div的背景图像会伸展而不是......好吧......不会伸展。但div本身也会被调整大小，而其中的img child则不会，并保持其预期的宽高比。
看到一些不正确的答案后，让我说清楚：div和图像大小必须匹配。悬停事件应该仅在您将鼠标悬停在图像本身上时触发，否则这不会像“按钮”。基本上你不允许使用大于图像的div，否则你会创建一个触发悬停事件的空白区域。
我正在寻找的答案就是能够让div本身调整大小，同时调整窗口大小，同时让背景图像始终覆盖整个div。
答案 0 :(得分：0)
您可以使用background-size属性来确保背景图像在给定容器中保持其宽高比。
对像这样的元素使用ID也是不好的做法。
我已经为你解决了这个问题...... https://jsfiddle.net/x18h41yr/
您也可以使用flex-box垂直居中页面元素。水平。阅读有关flexbox here
的更多信息