JQuery_jquery를 기반으로 한 이미지 자동 크기 조정 및 자르기

사실 저는 이런 효과를 오랫동안 쓰고 싶었어요. 이 쪽지를 가지고 오세요. 이해하셨으리라 믿습니다.
웹사이트를 아름답게 만들기 위해서는 사진의 크기가 다양해야 하기 때문에 일반 포털사이트에서는 사진을 동일한 비율로 가공하여 업로드하게 됩니다. 보기에는 좋지만 불행하게도 내가 만나는 웹사이트 편집자의 90%는 비전문적이라고 말하고 싶습니다.
웹사이트 편집자들이 제 노고를 망치는 것을 막기 위해 이렇게 하기로 했습니다.

1. 먼저 CSS에서 이미지의 크기를 정의합니다. JS가 실행되지 않으면 가장 일반적인 성능인 확장된 이미지를 볼 수 있습니다.
2. 일반적으로 사용되지 않는 추가 컨테이너입니다. 여기서는 기울임꼴 태그 를 선택하고 해당 CSS가 동일한 루트 img의 CSS와 정확히 동일하도록 정의하고 img를 컨테이너에 추가하여 margin:0; padding:0;
내가 한 일은 다음과 같습니다.

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

/*Public*/
cite {display: block;overflow:hidden;overflow:hidden !important;}

/*컨테이너*/
#BigPic img{display:block;padding:2px;width:240px;height:160px ;border: 1px solid #cccccc;}
#BigPic cite{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;}
#BigPic cite img{display: block;margin :0px;padding:0px;border:none;}

3. 이미지 처리 기능을 정의하고 정의된 이미지의 크기와 원본 크기를 참조하여 비율을 유지하면서 위치를 채운 후 자르기 컨테이너에 넣습니다.
내 코드:

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

//이미지 크기 판단 및 처리, 둘러싸기 컨테이너 자르기 - COoL
function cutImgz(obj){
var image=new Image();
image.src=obj.src;

$this=$(obj) ;
var iwidth=$this.width();//CSS에 고정된 이미지 표시 너비 가져오기
var iheight=$this.height();//CSS에 고정된 이미지 표시 높이 가져오기
if (1*image.width*iheight!=1*iwidth*image.height){
                                                                        사용 사용 사용 사용                                                         ‐                           out out out out out out out through out through out through through off     's' through 's right 통과하여 통과하여 통과' 통과하여 통과하여 통과하여 통과하여 빛으로, to 1*image.width*iheight!=1*iwidth*image.height_to/ image.height>=iwidth/iheight ){
                                                                                                   > 🎜> $ This.height ((Image.Height*iwidth) /Image.width ')
} 🎜>
//cite를 사용하여 자르기 효과 만들기
$this.wrap('');
}
}



4. 페이지를 로드할 때 모든 이미지를 탐색하여 캐시에 있는지 확인하고, 캐시에 없으면 바로 처리합니다. .
(
캐시된 이미지는 로드 몇 초 안에 처리되므로 onload 이벤트가 정의되기 전에 로드되어 onload 이벤트가 발생하지 않습니다. 이미지가 캐시에 없으면 직접 처리하면 이미지가 로드되지 않고 Image 개체에 의해 원래 크기가 빈 이미지로 간주되며 너비와 높이가 모두 0
)
내 코드:

코드 복사

코드는 다음과 같습니다.

$('img').each( function() { var image=new Image(); image.src=this.src; if(image.complete){ //캐시에 존재하여 즉시 처리

cutImgz(this ; });