title: What is this technique to resize the images proportionally used by google chrome new tab?
body: <p>I saw this code in Google Chrome <strong>Beta</strong> version's new tab where it show the icon if installed tabs.</p>
  
  <p><img src="https://i.stack.imgur.com/Tr8M6.jpg" alt="enter image description here"></p>
  
  <p>They are using any technique to resize the images.</p>
  
  <p>this is html of a icon</p>
  
  <pre><code>&lt;div class="app-img-container launch-click-target" title="Box Office" style="height: 97.56981132075472px; width: 97.56981132075472px; "&gt;
      &lt;img class="" src="chrome://extension-icon/dhbbohlkjglcppclgngklojecglglinl/128/0"&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>and it's css of related classes</p>
  
  <pre><code>.app-img-container {
  margin-left: auto;
  margin-right: auto;
  -webkit-mask-size: 100% 100%;
  }
  
  .app-img-container &gt; * {
  height: 100%;
  width: 100%;
  }
  </code></pre>
  
  <p>Can anyone tell me which method they are using? Is it based on Javascript? </p>
  
  <p>To check this you can install <a href="http://www.google.com/landing/chrome/beta/" rel="nofollow noreferrer">Google Chrome Beta</a> and install some apps from chrome store then open a new tab in chrome. you will se the icons.</p>
  
  <p><strong>Note: it's only works in Beta version</strong></p>
  
  <p><strong>This is the whole source of Tab page which I took from view source</strong>
  <a href="http://jsbin.com/ikituc/edit#html" rel="nofollow noreferrer">http://jsbin.com/ikituc/edit#html</a></p>
  
  <p><strong>And this is rendred source which i copied from Chrome Developer tools HTML tab</strong>
  <a href="http://jsbin.com/ekiqaf/edit#html" rel="nofollow noreferrer">http://jsbin.com/ekiqaf/edit#html</a></p>
  
  <p>I want to know the method which is being used to re-size the icons.</p>