Jaka jest ta technika, aby zmienić rozmiar obrazów proporcjonalnie używanych przez nową kartę Google Chrome?

Question

Widziałem ten kod w przeglądarce Google Chrome Beta nowej karcie wersji, na której wyświetlana jest ikona, jeśli zainstalowano karty.

Są przy użyciu dowolnej techniki do zmiany rozmiaru obrazów.

to html ikony

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

i to css powiązanych klas

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

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

ktoś może mi powiedzieć, który sposób są one za pomocą? Czy jest oparty na JavaScript?

Aby to sprawdzić, można zainstalować Google Chrome Beta i zainstalować niektóre aplikacje ze sklepu Chrome, a następnie otworzyć nową kartę w chrome. zobaczysz ikony.

Uwaga: to działa tylko w wersji Beta

To jest cała źródłem zakładce które wziąłem z pola widzenia źródła http://jsbin.com/ikituc/edit#html

I to jest rendred źródło który skopiowałem z Narzędzia do narzędzi dla programistów Chrome: karta HTML http://jsbin.com/ekiqaf/edit#html

Chcę poznać mnie thod, który jest używany do zmiany rozmiaru ikon.

Answer 1

Metoda jest oparta na javascrip. Jeśli spojrzysz na metodę calculateLayout_, zrozumiesz dlaczego:

Answer 2

Jest to rozwiązanie zasilane przez 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/źródło:

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

one ustawić szerokość .app-img-kontenera programowo, obraz robi się to szerokość z CSS.

Answer 3

Co masz na myśli przez zmianę rozmiaru? Na Wyspach Kanaryjskich nie ma zmiennego rozmiaru ikony. Jeśli masz na myśli zmianę rozmiaru z małych ikon na duże ikony, powinienem powiedzieć, że dla każdej aplikacji są dwie różne ikony. Na przykład dla Angry Birds:

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

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

Każda inna "rozmiar" właśnie z powodu przejścia CSS3