너비 감지 및 반응 형 이미지 사용

사진의 너비를 자동으로 설정하는 응용 프로그램이 있습니다. 문제는 가끔 원본 이미지보다 큰 크기를 정의한다는 것입니다. 예 :이 "a.jpg"는 500px 너비이고 600px는 표시 할 때 응용 프로그램을 정의합니다.너비 감지 및 반응 형 이미지 사용

일부 제한 레이아웃의 경우 변경할 방법이 없습니다. 응용 프로그램에서 정의한 이미지의 크기가 원래 크기보다 클 때 다른 사진이 사용됩니다.

EX : 응용 프로그램에서 너비 600px를 정의하고 이미지 "a.jpg"가 500px 인 경우 700px 너비 인 "b.jpg"를 사용합니다.

이미지는이 같은 코드 :

<article class="tile"> 
      <a href="photos/1.jpg"> 
       <img class="item" src="../img/fotos/10medium.jpg" /> 
      </a> 
</article>

이 할 수있는 방법이있다? jQuery를 사용하여 감사

출처

2013-06-29 Ana Paula

응용 프로그램이 요소의 '너비'로 정의하는 크기보다 CSS 미디어 쿼리를 사용하고 보이는 화면의 크기를 감지하는 것이 더 효율적일 수 있습니다. – Ohgodwhy

나는 그것을 어떻게합니까 ?? –

예 당신은 jQuery를이 옵션을 플러그인이

var img = $('img'); 
$('<img>').attr('src', img.attr('src')).load(function() { 
    if (img.width() > this.width) { 
    img.attr('src', 'big-image.jpg'); 
    } 
});

출처

2013-06-29 22:09:11

'(창) .width()'는 화면의 크기를 감지합니까? 아니면 내가 틀렸어? 코드를 편집했습니다. –

예, '$ (window) .width()'는 브라우저 창의 크기를 감지합니다 –

브라우저 너비를 원하지 않습니다. 'img src'의 원래 너비와 html "width"로 설정된 너비를 합성하고 싶습니다. : if ($ ('img'). width()> $ ('src to image'). width()) ' –

처럼 할 수 있습니까? 내 생각에 Responsive Img은 당신이하려는 일을하고 있지만 모든 프로젝트 요구 사항을 충족시키지 못할 수도 있습니다.

다른 것이 없다면 소스 코드를보고 자신이하는 일을 돕기위한 단서를 얻을 수 있습니다. 플러그인은 작고 잘 설명됩니다.

출처

2013-07-02 18:38:29

너비 감지 및 반응 형 이미지 사용

답변

관련 문제