Поистине отзывчивое изменение процентного изображения, не зависящее от контейнера

Question

ОК, поэтому я ищу действительно отзывчивое изменение размера процентного изображения, которое не зависит от контейнера. Другими словами, я хочу изменить размер изображения по своему размеру.

Причина заключается в том, что я могу динамически изменять размер всех изображений на странице для меньшего размера экрана.

Теперь, поскольку это для использования в решении CMS для пользователей и для пользователей предполагается, что HTML несовместим, мы не можем обернуть изображения чем-либо, мы не можем добавить к ним класс/идентификатор и т. Д.

Я хочу изменить все изображения на странице ЗА ИСКЛЮЧЕНИЕМ некоторых из немногих, к которым я могу применить классы или идентификаторы.

настоящее время я использую:

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 (размер контейнер не изображения) Div обертки (не годятся для того, что я пытаюсь сделать)

Если я являюсь полностью толстый и приближается к этому совершенно неправильно, что, без проблем, просто скажите, пожалуйста. Любая помощь будет широко оценена.

Благодаря

Стивен

Answer 1

ОК, так что я использую это 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> 

AS Я уверен, что вы можете сказать, что я не эксперт по JQuery, но он работает.

Он скрывает изображения (потому что он выглядел ужасно, увидев их внезапно изменяя размер, и если вы попробуете его до загрузки страницы, иногда размеры изображения пустые). Затем он меняет размеры на определенный процент расчета, который я решил. Затем он показывает их. Он скрывает и показывает все изображения, потому что в противном случае это выглядело просто глупо.

Установка ширины для авто перед вычислением заключается в том, что в противном случае он использует уже уменьшенный размер изображения, и это испортит вычисления.

Он также делает все это снова при изменении размера окна, но ничего не скрывает.

Может быть медленным нагрузка на мобильный телефон когда-то, но после загрузки и переключения между землей и портом я не мог видеть никаких задержек.

В любом случае это работает для моих нужд, пока.

Было бы здорово, если бы у кого-то было лучшее решение. Потому что это все еще не идеально, и я люблю идеальный.

Кто-то хочет убрать/ускорить мой JQuery, я не буду возражать.

Благодаря

Стивен