什么是这种技术调整图像比例使用谷歌Chrome新标签？ [英] What is this technique to resize the images proportionally used by google chrome new tab?

问题描述

我在Google Chrome 测试版版本的新标签页中看到此代码，如果安装了标签，则会显示此标签。

他们正在使用任何技术来调整图像大小。

这是图标的html

 < div class = app-img-container launch-click-targettitle =Box Officestyle =height：97.56981132075472px; width：97.56981132075472px;> 
< img class =src =chrome：// extension-icon / dhbbohlkjglcppclgngklojecglglinl / 128/0> 
< / div> 
  

它是相关类的css

  .app-img-container {
 margin-left：auto; 
 margin-right：auto; 
 -webkit-mask-size：100％100％; 
} 
 
 .app-img-container> * {
 height：100％; 
 width：100％; 
} 
  

任何人都可以告诉我他们使用哪种方法？是基于Javascript吗？

要检查此操作，您可以安装 Chrome浏览器测试版，并从Chrome商店安装一些应用，然后在Chrome中打开一个新标签页。

> 这是我从查看源获取的Tab页面的整个来源
http://jsbin.com/ikituc/edit#html

这是我从Chrome开发人员工具中复制的源代码标签
http://jsbin.com/ekiqaf/edit#html

我想知道用于重新调整图标大小的方法。

解决方案

resizable是什么意思？这里没有可调整大小的图标在加那利。如果你意味着从小图标调整大小到大图标我应该说，有两个不同的图标为每个应用程序。例如Angry Birds：

  chrome：// extension-icon / aknpkdffaafgjchaibgeefbgmgeghloj / 16/1 
 $ b b chrome：// extension-icon / aknpkdffaafgjchaibgeefbgmgeghloj / 128/0 
  

任何其他调整大小的CSS3转换

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.

解决方案

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

这篇关于什么是这种技术调整图像比例使用谷歌Chrome新标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！