아직 더 많은 jQuery–크기 조정 이미지 예

클라이언트의 오래 된 공급 업체에서 웹 파트를 상속 하 고 이미지 크기 문제.  이미지 60 되어야 합니다.×50 하지만 어떤 이상한 이유로, 원래 공급 업체 42에 그들을 강제로×42, 그래서 그들은 찌그러져 보이는:

 

좋은 이미지

나쁜 이미지

여기 태그가입니다. (다소 단순화):

<클래스 표 ' 확장 outlook'=>
  <thead>
    <tr>
      <th  폭 = 100'′>3 화요일</th>
    </tr>
  </thead>

  <tbody>
    <tr 클래스 '예측' =>
      <td 폭 = 100'′>
        <ul>
          <리 클래스 '높은' =>높은: 72&deg;F</리>
          <리 클래스 '낮은' =>낮은: 44&deg;F</리>
          <리 클래스 = '조건'>써니
            <img src =’
http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ 너비 ='42’ 높이 ='42’ alt =” />
          </리>
        </ul>
      </td>
    </tr>

  </tbody>

</테이블>

비록 유의 거는 이미지 자체에 대 한 경로 적절 한 치수를 보여 줍니다. (60×50) 원래 공급 업체 42에 강제×42.  왜?  미친.

어쨌든, 이 문제에 빠르고 쉬운 솔루션을 원했습니다 및 jQuery 밝혀졌다.  트릭은 모든 적절 한을 찾을 수 <img> 태그입니다.  다른 img 태그에 대해 정처 없이 헤매 다 싶지 않 았 어 (많습니다.).  JQuery의이 비트는 목적을 달성을 했다:

<스크립트 유형 = "텍스트/자바 스크립트" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></스크립트>

<스크립트 유형 = "텍스트/자바 스크립트">
     $(문서).준비(함수 () {

         $(' li.condition > 그림 ').각(함수 (인덱스, 항목)
           
{
             $(항목).css("너비", "60"); 
             $(항목).css("높이", "50");
            });
     }); // 문서 로드에
</스크립트>

코드의 그 비트 컬렉션 발견 <리> 태그의 클래스는 "상태"와 <img> 아이 들.  그것은 그때 모든 것을 반복합니다.  마법 처럼 일했다.

아마 그것을 간소화할 수 있습니다., 하지만 난 결코 한 π 해결 유닉스 사람의 종류 받는 사람 18 sed와 awk를 사용 하 여 숫자 정밀도 아니에요 그런 jQuery가 중 하는 경우 미소.

</끝>

내 블로그를 구독.

에 지 저 귐에 나를 따르라합니다 http://www.twitter.com/pagalvin

응답을 남기다

귀하의 이메일 주소는 공개되지 않습니다. 필요 입력 사항은 표시되어 있습니다 *