용기와 독립적으로 실제로 반응하는 백분율 이미지 크기 조정

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, 그래서 래퍼 위의 CSS로, 지금 나를 위해 크기 조정을 할이 jQuery를 사용하고 있습니다.

<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를 정리하고 속도를 높이고 싶습니다. 내가 반대하지 않을 것입니다.

감사합니다 그것은 내 방식에서 자 고의 주말은 아마 잘못 그래서 후

스티븐