什麼是這種技術來調整圖像大小按比例使用谷歌瀏覽器新標籤？

我在谷歌瀏覽器中看到了這段代碼Beta版本的新選項卡它顯示圖標，如果已安裝選項卡。什麼是這種技術來調整圖像大小按比例使用谷歌瀏覽器新標籤？

enter image description here

他們使用任何技術來調整圖像。

這是一個圖標

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

的HTML和它的相關類

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

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

誰能告訴我，他們正在使用的方法的CSS？它基於Javascript嗎？

要檢查此項，您可以安裝Google Chrome Beta並從chrome商店安裝一些應用程序，然後在Chrome中打開一個新標籤頁。你會選擇圖標。

注意：它只能在Beta版

這是標籤頁的整個源代碼這是我從視圖源 http://jsbin.com/ikituc/edit#html

了，這是rendred這是我從複製源Chrome開發人員工具HTML選項卡 http://jsbin.com/ekiqaf/edit#html

我想知道我這是用來重新調整大小的圖標。

來源

2011-09-30 Jitendra Vyas

做查看源代碼在新標籤頁上，並期待在JavaScript的（CTRL + F：'寬度='） –

Chrome中的應用圖標無法調整大小，因此您需要手動在應用中添加不同的尺寸。 – c69

該方法肯定基於javascrip。如果你看看calculateLayout_方法，你會明白爲什麼:)

來源

2011-09-30 17:43:41 ArtoAle

它是一個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>

鉻：// NEWTAB /源：

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

它們設置的.app-IMG-容器的寬度編程，圖像獲取此寬度與CSS。

來源

2011-09-30 17:50:36

你的意思是可調整大小？加那利地區沒有可調整大小的圖標。如果你的意思是從小圖標調整到大圖標，我應該說每個應用程序都有兩個不同的圖標。例如，對於憤怒的小鳥：

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

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

任何其他的「調整」，是因爲CSS3過渡的

來源

2011-09-30 17:54:52 Mohsen

什麼是這種技術來調整圖像大小按比例使用谷歌瀏覽器新標籤？

回答

相關問題