真正的響應百分比圖像調整大小獨立的容器

Question

好吧，所以我正在尋找真正的響應百分比圖像調整大小獨立於容器。換句話說，我想調整圖像相對於它自己的大小。

原因是我可以動態調整頁面上的所有圖像以適應更小的屏幕尺寸。

現在，因爲它被用於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（容器的大小不是圖像） 股利包裝（無好如果我是什麼，我試圖做）

完全厚和接近這完全錯了什麼，沒問題，請告訴我。任何幫助將大規模讚賞。

感謝

斯蒂芬

Answer 1

OK，所以我用這個jQuery做調整大小對我來說，現在，在包裝上面的CSS。

<script> 
$(document).ready(function() { 
if (document.documentElement.clientWidth < 700) { 
    $("img").hide(); 
} 
    $(window).load(function() { 
    if (document.documentElement.clientWidth < 700) { 
     $('img:not(".noScale, .subLogo")').each(function() { 
      $(this).css("width", "auto"); 
      $(this).css("width", this.width * ($(document).width()/700)); 
      $(this).css("height", "auto"); 
      $(this).show(); 
     }); 
    } 
    $("img").show(); 
}); 
    $(window).resize(function() { 
    if (document.documentElement.clientWidth < 700) { 
     $('img:not(".noScale, .subLogo")').each(function() { 
      $(this).css("width", "auto"); 
      $(this).css("width", this.width * ($(document).width()/700)); 
      $(this).css("height", "auto"); 
     }); 
    } 
    if (document.documentElement.clientWidth > 700) { 
     $('img:not(".noScale, .subLogo")').each(function() { 
      $(this).css("width", "auto"); 
     }); 
    } 
    }); 
}); 
</script> 

，因爲我相信你能告訴我不是JQuery的專家，但它的工作。

它隱藏圖像（因爲它看起來很糟糕，看到它們突然調整大小，如果在加載頁面之前嘗試它，有時圖像大小是空的）。 然後它根據我決定的某個百分比計算調整它們。 然後顯示它們。 它隱藏並顯示所有的圖像，因爲否則它看起來很傻。

在計算之前將寬度設置爲自動，因爲否則它會使用已經縮小的圖像大小，並且會使計算混亂。

它也可以在窗口大小上再次完成所有操作，但不會隱藏任何內容。

有時在移動設備上加載速度可能會很慢，但一旦加載，並在陸地和端口之間切換，我看不到任何延遲。

無論如何，它適用於我的需求，現在。

如果有人有更好的解決方案，這將是偉大的。因爲這還不完美，而且我很完美。

任何人想收拾/加快我的JQuery我不會反對。

感謝

斯蒂芬