Core Animated Pages. Move Image without stretching.

[d.mue...@googlemail.com]

Im trying to customize the ChipToCard Effect from Polymers core-animated-pages. (https://www.polymer-project.org/0.5/components/core-animated-pages/demos/music.html)

My Idea is that the "chip-top" div contains a image and there is some text in the "chip-bottom" just like in the example. 

My Problem now is that if I put the image just into it it looks weird when transforming because the image gets stretched during the animation. 

I have played around a lot now but i cant get a solution that is satisfying. 

<section style="overflow:scroll; overflow-x: hidden;">
    <div class="chip-container" horizontal around-justified layout>

                            <div layout vertical>

                                <template repeat="{{resp[0] as item}}">

                                    <div class="chip" >

                                        <div self class="chip-top"  hero-id="{{ item.pk }}-art" hero>

                                            <img src="/upload/{{item.fields.image}}"  />

                                        </div>

                                        <div class="chip-bottom" hero-id="{{ item.pk }}-text" hero>

                                            <div class="chip-title1" >{{ item.fields.headline1 }}</div>

                                            <div class="chip-title2" >{{ item.fields.headline2 }}</div>

                                        </div>

                                    </div>

                                </template>

                             </div>
   </div>

</section>

<section style="overflow-y:scroll; overflow-x: hidden;" id="details" on-tap="{{albumTapped}}">

                        <wth-header hero cross-fade></wth-header>

                        <div class="card" layout horizontal  cross-fade>

                            <div class="card-left" hero-id="{{ post.pk }}-art" hero>

                                <div class="grid" >

                                    <figure class="effect-bubba">

                                        <img src="/upload/{{post.fields.image}}" on-tap="{{null}}" />

                                        <figcaption>

                                            <h2>Namesdfsdg <span>Surename</span></h2><br/>

                                            <p>kashdkjahf asjhdg difug </p>

                                        </figcaption>

                                    </figure>

                                </div>

                            </div>

                            <div flex class="card-right" hero-id="{{ post.pk }}-text" hero>

                                <div layout vertical>

                                    <div class="card-title1">

                                        {{post.fields.headline1}}

                                    </div>

                                    <div class="card-title2">

                                        {{post.fields.headline2}}

                                    </div>

                                    <div layout horizontal center>

                                        <div flex>

                                            <div class="card-album-title"   ><a href="{{post.fields.link1}}">{{post.fields.link1_name}}</a></div>

                                        </div>

                                    </div>

                                    <div layout horizontal center>

                                        <div flex>

                                            <div class="card-album-title"><a href="{{post.fields.link2}}">{{post.fields.link2_name}}</a></div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </section>

with this solution i prevent the image from getting stretched but the effect of chip to card is missing now.  

Does someone have some knowledge about the hero-transition effect cause i cant get any documentation from polymer itself about that problem.