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

问题

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.

回答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

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/7613810/what-is-this-technique-to-resize-the-images-proportionally-used-by-google-chrome

标签

javascript

css

google-chrome

xhtml