Bug: Image smaller than container is stretching to fit after slot only

[ribeirobreno]

Steps to reproduce:

1. Select images with equal sizes and smaller than your viewport
2. Create a Cocoen comparison where both images are smaller than the Cocoen containing element. (see the example for a simple html+js which causes the issue)

Expected:

The images are stretched or not in the same way.

Actuall results:

The "after" slot is stretched to fit the container width and the before slot is kept untouched.

Workaround

Add this style (remove stretching from the "after" slot):

cocoen-component > img[slot="after"] {
    width: auto!important;
}

Example:

https://jsfiddle.net/e75zmsfc/

For posterity, in case jsFiddle goes away:

<div class="container">
  <div class="cocoen">
    <!-- Both images are 380x380 pixels as of the creation of this example. -->
    <img src="https://cdn02.nintendo-europe.com/media/images/11_square_images/games_18/nintendo_switch_5/SQ_NSwitch_MetroidDread_image380w.jpg">
    <img src="https://cdn02.nintendo-europe.com/media/images/11_square_images/games_18/nintendo_3ds_26/SQ_3DS_MetroidSamusReturns_image380w.jpg">
  </div>
</div>

<script src="https://unpkg.com/cocoen/dist/cocoen.js"></script>
<script>
Cocoen.parse(document.body);
</script>

[YouCanflyThruMostTheSun]

Any update on this bug? The workaround does not work.

[koenoe]

Haven't had any time yet to look, but feel free to open a PR with a proper fix

[koenoe]

This is now fixed and released https://github.com/koenoe/cocoen/releases/tag/v3.1.2