웹 페이지 이미지를 처리할 때, 특히 일부 이미지 목록 애플리케이션에서는 이미지 크기를 균일하게 유지하기 어렵습니다. 이미지 크기를 직접 설정하면 이미지가 늘어나고 이미지가 흐릿해집니다. 이 문서에 소개된 코드는 자동으로 크기를 조정할 수 있습니다. 이미지가 로드된 후의 이미지 크기를 조정합니다.
Javascript:
< ="javascript " type="text/javascript">
< !--
// 설명: JavaScript를 사용하여 웹페이지 이미지의 동일한 크기 조정
// 구성: http://www .CodeBit.cn
function DrawImage(ImgD,FitWidth,FitHeight)
{
var image=new Image()
image.src=ImgD.src
if(image.width> ;0 && 이미지. 높이>0)
{
if(image.width/image.height>= FitWidth/FitHeight)
{
if(image.width>FitWidth)
{
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}
else
{
ImgD.width=image.width ;
ImgD .height=image.height;
}
}
else
{
if(image.height>FitHeight)
{
ImgD.height= FitHeight
ImgD.width=(image.width*FitHeight)/image.height;
}
else
{
ImgD.width=image.width; =image.height;
}
}
}
}
//->
호출 방법:
코드:
이미지가 큰 경우 설정하는 것이 좋습니다. 동시에 이미지 태그에 원하는 이미지 크기를 입력하면 로드 중에 페이지가 확장되지 않습니다. 이 크기는 최종 크기 조정 효과에 영향을 미치지 않습니다. 위 코드는 다음과 같이 수정할 수 있습니다.
코드: