¿Cuál es esta técnica para cambiar el tamaño de las imágenes proporcionalmente utilizadas por google chrome new tab?

Question

Vi este código en Google Chrome Beta nueva pestaña de la versión donde muestra el icono si las pestañas están instaladas.

Están utilizando cualquier técnica para cambiar el tamaño de las imágenes.

esto es html de un icono

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

y es css de clases relacionadas

.app-img-container { 
margin-left: auto; 
margin-right: auto; 
-webkit-mask-size: 100% 100%; 
} 

.app-img-container > * { 
height: 100%; 
width: 100%; 
} 

¿Puede alguien decirme qué método se está utilizando? Está basado en Javascript?

Para comprobar esto, puede instalar Google Chrome Beta e instalar algunas aplicaciones de Chrome Store y luego abrir una nueva pestaña en chrome. verás los íconos.

Nota: es sólo funciona en la versión Beta

Esta es toda la fuente de la página Tab que tomé de vista del origen de http://jsbin.com/ikituc/edit#html

Y esto se rendred fuente de la cual copié de Herramienta para desarrolladores de Chrome pestaña HTML http://jsbin.com/ekiqaf/edit#html

Quiero saber quién soy thod que se está utilizando para cambiar el tamaño de los iconos.

Answer 1

El método se basa seguramente en javascrip. Si echa un vistazo al método calculateLayout_, comprenderá por qué :)

Answer 2

Es una solución con JS + CSS.

<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/fuente:

.app-img-container > * { 
    height: 100%; 
    width: 100%; 
} 

Se ajusta el ancho de .app-img-contenedor mediante programación, la imagen se pone esta anchura con CSS.

Answer 3

¿Qué quieres decir con el cambio de tamaño? No hay un icono de tamaño variable aquí en Canarias. Si quieres cambiar el tamaño de los íconos pequeños a los íconos grandes, debo decir que hay dos iconos diferentes para cada aplicación. Por ejemplo, para Angry Birds:

chrome://extension-icon/aknpkdffaafgjchaibgeefbgmgeghloj/16/1 

chrome://extension-icon/aknpkdffaafgjchaibgeefbgmgeghloj/128/0 

Cualquier otro "redimensionar" es debido a las transiciones CSS3