CODEWITHSUNDEEP
javascriptcssgoogle-chromexhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152777

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.

enter image description here

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.

Upvotes: 10

Views: 2061

Answers (3)

Mohsen
Mohsen

Reputation: 65815

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

Upvotes: 4

Maximilian Hils
Maximilian Hils

Reputation: 6770

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.

Upvotes: 1

ArtoAle
ArtoAle

Reputation: 2977

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

Upvotes: 2

Related Questions