Что это за методика изменения размера изображений, пропорционально используемая новой вкладкой Google Chrome?

Question

Я видел этот код в Google Chrome Бета-версия новой версии, где отображается значок, если установлены вкладки.

Они используют любую технику дляизмените размеры изображений.

это html иконки

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

и это css связанных классов

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

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

Может кто-нибудь сказать мне, какой метод они используют?Это основано на Javascript?

Чтобы проверить это, вы можете установить Google Chrome Beta и установить некоторые приложения из магазина Chrome, а затем открыть новую вкладку в Chrome.Вы выберете значки.

Примечание: это работает только в бета-версии

Это весь источник вкладки, который я взял из исходного представления http://jsbin.com/ikituc/edit#html

И это источник из ста, который я скопировал из вкладки HTML инструментов разработчика Chrome http://jsbin.com/ekiqaf/edit#html

Я хочу знать, какой метод используетсяизменить размеры значков.

Answer 1

Что вы подразумеваете под изменяемым размером?В Канарских островах нет изменяемого размера значка.Если вы имеете в виду изменение размера от маленьких значков до больших значков, я должен сказать, что для каждого приложения есть два разных значка.Например, для Angry Birds:

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

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

Любое другое «изменение размера» происходит из-за переходов CSS3

Answer 2

Метод, безусловно, основан на javascrip.Если вы посмотрите на метод calculateLayout_, вы поймете, почему:)

Answer 3

Это решение на базе 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 / source:

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

Они устанавливают ширину .app-img-container программно, изображение получает эту ширину с помощью CSS.