What is this technique to resize the images proportionally used by google chrome new tab?

Question

I saw this code in Google Chrome Beta version's new tab where it show the icon if installed tabs.

They are using any technique to resize the images.

this is html of a icon

<div class="app-img-container launch-click-target" title="Box Office" style="height: 97.56981132075472px; width: 97.56981132075472px; ">
    <img class="" src="chrome://extension-icon/dhbbohlkjglcppclgngklojecglglinl/128/0">
  </div>

and it's css of related classes

.app-img-container {
margin-left: auto;
margin-right: auto;
-webkit-mask-size: 100% 100%;
}

.app-img-container > * {
height: 100%;
width: 100%;
}

Can anyone tell me which method they are using? Is it based on Javascript?

To check this you can install Google Chrome Beta and install some apps from chrome store then open a new tab in chrome. you will se the icons.

Note: it's only works in Beta version

This is the whole source of Tab page which I took from view source http://jsbin.com/ikituc/edit#html

And this is rendred source which i copied from Chrome Developer tools HTML tab http://jsbin.com/ekiqaf/edit#html

I want to know the method which is being used to re-size the icons.

Answer 1

What do you mean by resizable? There is no resizable icon here in Canary. If you mean resizing from small icons to big icons I should say there is two different icons for every app. For example for Angry Birds:

chrome://extension-icon/aknpkdffaafgjchaibgeefbgmgeghloj/16/1

chrome://extension-icon/aknpkdffaafgjchaibgeefbgmgeghloj/128/0

Any other "resize" is because of CSS3 transitions

Answer 2

The method is surely based on javascrip. If you take a look at the calculateLayout_ method you will understand why :)