jQuery는 큰 그림이 페이지에 적응할 수 있도록 큰 그림의 비례적인 크기 조정을 구현합니다.

페이지를 레이아웃할 때, 특히 외부 링크 사진(보통 외부 사이트에서 수집한 사진)을 로드할 때 큰 사진이 페이지 컨테이너를 "깨뜨리는" 상황이 발생할 수 있습니다. 따라서 이 기사에서는 jQuery를 사용하여 큰 그림의 크기를 비례적으로 조정하고 페이지 레이아웃에 맞게 조정하는 방법을 설명합니다.

보통 우리는 썸네일을 처리할 때 백엔드 코드(PHP, .net, Java 등)를 사용하여 프런트엔드 페이지에서 호출할 큰 그림을 기반으로 특정 크기의 썸네일을 생성합니다. 물론 프런트 엔드 자바스크립트 스크립트를 사용하여 썸네일을 로드하기도 합니다. 큰 이미지를 소위 썸네일로 확대하는 것은 바람직하지 않습니다. 그러나 이 웹사이트의 기사 세부정보 페이지와 같은 웹사이트 콘텐츠 페이지의 경우 큰 이미지를 로드해야 하는 경우 레이아웃이 "깨지는" 것을 방지하기 위해 jQuery를 사용하여 이미지 크기를 비례적으로 조정합니다.

1. 알려진 이미지 크기

코드 복사 코드는 다음과 같습니다. 다음:

;

페이지에 로드된 이미지에 속성 너비 및 높이 값이 포함된 경우 몇 가지 간단한 jQuery 코드를 사용하여 동일한 크기 조정을 달성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$(function(){
var w = $("#demo1").width();//컨테이너 너비
$("#demo1 img").each(function(){//그림이 많으면 각각( ) 이동
var img_w = ​​​​$(this).width();//사진 너비
var img_h = $(this).height();//사진 높이
if(img_w> w){//그림의 너비가 컨테이너의 너비를 초과하는 경우 - 터질 것입니다
var height = (w*img_h)/img_w; //높이 조정
$(this).css({"width ":w,"height" :height});//크기 조정 후 너비와 높이 설정
}
});
});

2. 알 수 없는 이미지 size

페이지에 로드된 이미지의 크기를 알 수 없는 경우 위의 코드를 효과적으로 확장할 수 없는 경우 수집된 외부 링크 이미지에서 이러한 상황이 자주 발생합니다.

코드 복사 코드는 다음과 같습니다.

다행히도 몇몇 친절한 친구들이 특별한 플러그인을 만들어 주었습니다. , 크로스 브라우저로 프론트 엔드 친구들의 주요 문제를 해결합니다.

다음은 autoIMG에 대한 개략적인 소개입니다.

autoIMG는 기사 이미지의 크기를 신속하게 조정할 수 있습니다. 이미지가 로드될 때까지 기다리지 않고 브라우저를 사용하여 이미지 파일 헤더 크기 데이터를 얻을 수 있습니다.

autoIMG는 다음과 호환됩니다: Chrome | Sifari | IE7 | IE8 | ...

autoIMG 플러그인을 호출하는 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(function(){
$(" #demo2").autoIMG();
});

autoIMG 인스턴스 다운로드