JSFiddle - React, Tailwind, and code Playground

by MarmiK

HTML

<body>
    
    <div class="fixed"></div>
    <br />
    <div class="notfixed"></div>
    
    <button id="smaller">Make it smaller</button>
</body>

CSS

body {
    height: 7000px;
}

#smaller {
    position: absolute;
    top: 0;
}

.fixed {
    height: 250px;
    width: 250px;
    background: #000 url('http://placekitten.com/200/600') no-repeat 0 0;
    background-size: auto 250px;
}

.notfixed {
    height: 250px;
    width: 250px;
    background: #000 url('http://placekitten.com/200/600') no-repeat;
    background-size: auto 100%;
}

JavaScript

$(document).ready(function(){
    $('#smaller').click(function(){
        var oldHeight = $('.fixed').height();
        $('.fixed, .notfixed').css('height', oldHeight/1.25 +'px');
    });
});