div CSS保持長寬比的響應按鈕

Question

這是一種特定的問題。

<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。

---

的「絕招」在這裏保持縱橫比是事實，如果你只設置高度或僅寬度，其他參數應該自動保持規模，如果有涉及到的圖像，這就是1像素是什麼。

我不知道爲什麼這雖然打破了在調整大小，最初的時候在網頁加載時它工作正常。

這個問題似乎圍繞着，當你調整，div的背景圖片拉伸，而不是......呃......沒有拉伸的事實。但div本身也會被調整大小，而img內部的孩子則不會，並保持其縱橫比符合預期。

---

看到了一些不正確的答案後，讓我做什麼明確：

div和圖像大小必須匹配。懸停事件應該只在您將鼠標懸停在圖片上時纔會觸發，否則這種感覺不像「按鈕」。基本上不允許div大於圖像，否則你會創建觸發懸停事件的空白區域。

我要找的答案是一個能夠讓DIV本身在保持縱橫比的同時調整窗口大小的方式調整，同時具有背景圖像總是覆蓋整個股利。

Answer 1

可以使用background-size屬性以確保背景圖像給定的容器內保持它們的縱橫比。

對於像這樣的元素使用ID也是不好的做法。

我已經解決了這個問題，你... https://jsfiddle.net/x18h41yr/

您還可以使用柔性框現在中心頁面元素垂直&水平。詳細瞭解flexbox here