Achieve a smooth scale transition in parent and children div simultaneously - css

Question

I am trying to scale a div and make its children look like it stays in the same place while the parent scales. To achieve it I am scaling the parent, and the children inversely:
Children-scale Parent-scale
start 2 0.5 -> 2 * 0.5 = 1
middle 1.5 0.75 -> 1.5 * 0.75 = 1.125 [It should be 1]
end 1 1 -> 1
As can be seen in the demo, the initial and final values are correct but not the intermediates. At first I thought it could be the easing function, but assigning a linear (constant speed) makes no difference. Possibly assigning an inverse easing could do it, but I am asking if there is a non-mathematical way to achieve this (as I am not confident with bezier curves).
How could I achieve a smooth transition using the transform scale property?
var $div = $('div');
$div.on('click', function() {
$div.toggleClass('scaled');
});
div {
width: 100%;
height: 200px;
overflow:hidden;
}
img {
width: auto;
height: 100%;
}
div, img {
transition: transform 1s linear;/* Other easing function make no difference */
/* transform-origin:left top; Makes no difference */
}
div.scaled {
transform:scaleY(0.5);
}
div.scaled img {
transform:scaleY(2);/* 1 / 0.5 */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Click the image</span>
<div><img src="http://i.imgur.com/sbyPaAsl.jpg" alt=""></div>
JSFiddle.
Edit:
Using CSS animations and assigning the correct values each x%, I get something close but still not perfect. (This also needs to know beforehand the scale value or otherwise create the animation and assign it with JavaScript.)
var $div = $('div');
$div.on('click', function() {
$div.toggleClass('scaled');
});
div {
width: 100%;
height: 200px;
overflow:hidden;
}
img {
width: auto;
height: 100%;
}
div.scaled {
animation: ddiv 1s linear;
}
div.scaled img {
animation: iimg 1s linear;
}
#keyframes iimg {
0% {transform:scaleY(2);}
20% {transform:scaleY(1.8);}
40% {transform:scaleY(1.6);}
60% {transform:scaleY(1.4);}
80% {transform:scaleY(1.2);}
100% {transform:scaleY(1);}
}
#keyframes ddiv {
0% {transform:scaleY(0.5);}
20% {transform:scaleY(0.555);}/* 1 / 1.8 */
40% {transform:scaleY(0.625);}/* 1 / 1.6 */
60% {transform:scaleY(0.714);}/* 1 / 1.4 */
80% {transform:scaleY(0.833);}/* 1 / 1.2 */
100% {transform:scaleY(1);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Click the image</span>
<div><img src="http://i.imgur.com/sbyPaAsl.jpg" alt=""></div>

Answer 1

I am posting an answer to the question as I found a bezier curve by testing values which is close to the desired result; but I am still open to other answers if someone has a better approach.
The function is 1/x. The scale-up element needs a linear easing, and the scale-down one a cubic-bezier(.25,.48,.52,.75) (it is not the exact curve). This way the children element almost looks like it is not scaling.
JSFiddle
var $div = $('div');
$div.on('click', function() {
$div.toggleClass('scaled');
});
div {
width: 100%;
height: 200px;
overflow:hidden;
}
img {
width: auto;
height: 100%;
}
div {
transition: transform 1s linear;
}
img {
transition: transform 1s cubic-bezier(.25,.48,.52,.75);
}
div.scaled {
transition: transform 1s cubic-bezier(.25,.48,.52,.75);
transform:scaleY(0.5);
}
div.scaled img {
transition: transform 1s linear;
transform:scaleY(2);/* 1 / 0.5 */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="http://i.imgur.com/sbyPaAsl.jpg" alt=""></div>

Answer 2

Would an approach using pseudoelements work for you instead?
Here's an idea:
var $div = $('div');
$div.on('click', function() {
$div.toggleClass('scaled');
});
div {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
img {
width: auto;
height: 100%;
}
div:after,
div:before {
content: '';
position: absolute;
height: 0;
width: 100%;
display: block;
background: white;
}
div:before {
top: 0;
}
div:after {
bottom: 0;
}
div.scaled:after,
div.scaled:before {
transition: height 1s linear;
}
div.scaled:after,
div.scaled:before {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Click the image</span>
<div><img src="http://i.imgur.com/sbyPaAsl.jpg" alt=""></div>

Answer 3

I dont know if it's useful for your situation or not:
But if you don't need the overflow-hidden in the container, making it and the child rotate could give you a posibility:
var $div = $('div');
$div.on('click', function() {
$div.toggleClass('scaled');
});
div {
width: 100%;
height: 200px;
border: solid 1px green;
}
img {
width: auto;
height: 50%;
top: 25%;
}
div, img {
transition: transform 1s linear;
transform-style: preserve-3d;
position: relative;
}
div.scaled {
transform: rotateX(60deg);
}
div.scaled img {
transform: rotateX(-60deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Click the image</span>
<div><img src="http://i.imgur.com/sbyPaAsl.jpg" alt=""></div>