好吧,所以我正在尋找真正的響應百分比圖像調整大小獨立於容器。換句話說,我想調整圖像相對於它自己的大小。真正的響應百分比圖像調整大小獨立的容器
原因是我可以動態調整頁面上的所有圖像以適應更小的屏幕尺寸。
現在,因爲它被用於CMS解決方案,並且用戶被認爲是非HTML的,所以我們不能用任何東西包裝圖像,我們不能向他們添加類/ ID等。
我將要更改頁面上的所有圖像,除了某些我可以應用類或ID的圖像。
我目前正在使用:
img {
-webkit-transform: scale(0.625) translate(-29%, 0); /* Saf3.1+, Chrome */
-moz-transform: scale(0.625) translate(-29%, 0); /* FF3.5+ */
-ms-transform: scale(0.625) translate(-29%, 0); /* IE9 */
-o-transform: scale(0.625) translate(-29%, 0); /* Opera 10.5+ */
transform: scale(0.625) translate(-29%, 0);
/* IE6–IE9 */
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}
.noScale, .userFeed img, .twitter img, .subLogo {
-webkit-transform: scale(1) translate(0,0); /* Saf3.1+, Chrome */
-moz-transform: scale(1) translate(0,0); /* FF3.5+ */
-ms-transform: scale(1) translate(0,0); /* IE9 */
-o-transform: scale(1) translate(0,0); /* Opera 10.5+ */
transform: scale(1) translate(0,0);
/* IE6–IE9 */
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}
這主要工作,但所有的圖像仍然看作是他們的一切原始大小,所以它有效地得到它周圍填充到原來的大小。這並不是一個大規模減少62%的巨大問題,但隨着減少量的減小,成爲一個更大的問題。顯然還需要有幾個媒體查詢實現來處理越來越小的屏幕尺寸。
翻譯是在那裏,因此圖像的左邊緣仍然是圖像的左邊緣。
我會考慮JS/JQuery解決方案,但是我真的想要一種CSS方式來實現與現代瀏覽器兼容的方式。所以ie9 +。
在你提出任何以下時,不要從我的測試工作,但我很高興被證明是錯誤:
最大高度/最大寬度(他們仍然對大小容器在一些瀏覽器) 變焦(不完全的支持,將是完美的,如果它是) 高度/ widht(容器的大小不是圖像) 股利包裝(無好如果我是什麼,我試圖做)
完全厚和接近這完全錯了什麼,沒問題,請告訴我。任何幫助將大規模讚賞。
感謝
斯蒂芬
所以後睡在它我的方法的一個週末,也許是錯誤的。由於這是一個CMS,只有某些區域可以被「非techi」用戶訪問,所以我應該專門針對這些區域。我也犯了一個與我的網站有關的基本錯誤。由於我的網站大多從兩列到一列,所以我只需要在單列越來越小時重新調整大小。最初我沒有對此進行說明,因此圖像最終會變得太小或與其他內容不成比例。 – Netspud2K 2014-12-08 10:21:14