div CSS Responsive Button that Keeps Aspect Ratio
<p>This is kind of a specific question.</p>

<pre><code>&lt;div id="d_btn"&gt;
    &lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"&gt;
&lt;/div&gt;
</code></pre>

<p>Here's a jsfiddle: <a href="https://jsfiddle.net/fcjwjutb/" rel="nofollow">https://jsfiddle.net/fcjwjutb/</a></p>

<p>you'll notice it creates an image button which is really just a div with a background image, and that thanks to a base64 data of a single transparent pixel the aspect ratio is always 1:1 (a different pixel w/h would give different aspect ratio). it changes the image when you hover.</p>

<p>the problem is: if I resize the window vertically, the aspect ratio breaks.</p>

<p>however, automagically, if you refresh the page - the aspect ratio returns to normal.</p>

<p>what I want is the aspect ratio to stay correct while you resize the window, without having to refresh. what would I need to change in this specific example to accomplish this? looking for a CSS answer, not JS.</p>

<hr>

<p>the "trick" to maintain aspect ratio here is the fact that if you set only height or only width, the other parameter should automatically maintain scale if there's an image involved, that's what the 1pixel is for.</p>

<p>I don't get why this breaks upon resize though, when initially upon page load it works correctly.</p>

<p>The issue seems to revolve around the fact that when you resize, the div's background image stretches instead of... well... not stretching. but the div itself also gets resized, while the img child inside of it doesn't, and maintains its aspect ratio as intended.</p>

<hr>

<p>after seeing some incorrect answers let me make something clear:</p>

<p>the div and the image size have to match. hover event should only get triggered when you hover over the image itself, otherwise this doesn't feel like a "button". basically you're not allowed to have a div larger than the image, or else you create blank area that triggers a hover event.</p>

<p>the answer I'm looking for is one that is able to make the div itself resize in a way that keeps the aspect ratio while you resize the window, while having the background image always cover the entire div.</p>