>웹 프론트엔드 >JS 튜토리얼 >JavaScript는 웹 페이지 이미지 코드의 균등 비율 확장 및 method_javascript 기술 호출을 구현합니다.

JavaScript는 웹 페이지 이미지 코드의 균등 비율 확장 및 method_javascript 기술 호출을 구현합니다.

WBOY
WBOY원래의
2016-05-16 17:41:25890검색

웹 페이지 이미지를 처리할 때, 특히 일부 이미지 목록 애플리케이션에서는 이미지 크기를 균일하게 유지하기 어렵습니다. 이미지 크기를 직접 설정하면 이미지가 늘어나고 이미지가 흐릿해집니다. 이 문서에 소개된 코드는 자동으로 크기를 조정할 수 있습니다. 이미지가 로드된 후의 이미지 크기를 조정합니다.
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;
}
}
}
}
//->


호출 방법:
코드:


 자동 크기 조정 후 효과


이미지가 큰 경우 설정하는 것이 좋습니다. 동시에 이미지 태그에 원하는 이미지 크기를 입력하면 로드 중에 페이지가 확장되지 않습니다. 이 크기는 최종 크기 조정 효과에 영향을 미치지 않습니다. 위 코드는 다음과 같이 수정할 수 있습니다.
코드:


자동 크기 조정 후 효과
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.