What is this technique to resize the images proportionally used by google chrome new tab?
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/1chrome://extension-icon/aknpkdffaafgjchaibgeefbgmgeghloj/128/0Any other "resize" is because of CSS3 transitions
The method is surely based on javascrip.If you take a look at the calculateLayout_ method you will understand why :)
Its a JS + CSS powered solution.
<div class="app-img-container launch-click-target" title="Chrome Web Store" style="height: 67.98490566037735px; width: 67.98490566037735px; "> <img class="" src="chrome://theme/IDR_WEBSTORE_ICON"> <img class="apps-promo-logo"></div>chrome://newtab/ source:
.app-img-container > * { height: 100%; width: 100%;}They set the width of .app-img-container programatically, image gets this width with CSS.