우리 모두 알다시피, 다채로운 웹 코스웨어는 이미지 지원과 불가분의 관계에 있습니다. 이미지는 웹 페이지의 선명도를 높이는 반면, 웹 페이지의 크기를 늘리고 다운로드 속도를 늦추기도 합니다. 웹사이트에서 이미지를 적절한 크기로 페이지에 표시하는 방법은 연구해볼 만한 문제입니다. 이를 위해 작가는 대본 작가들의 참고를 위해 자신의 경험담을 일부 적어 서로 격려하고 있다.
요구사항 분석: 이 웹사이트는 뉴스 관리 시스템을 사용합니다. 홈페이지 뉴스 열에서 이미지 파일을 데이터베이스에서 그림 뉴스의 그림으로 호출하여 텍스트 래핑 형식을 형성해야 합니다. 레이아웃 요구에 따라 이미지 너비는 200px을 초과할 수 없습니다.
이미지를 적절한 크기로 표시하도록 허용하는 문제는 본질적으로 큰 이미지를 축소하는 문제입니다. 이미지의 URL을 통해 이미지의 크기(너비, 높이)를 어떻게 구하느냐가 문제의 핵심입니다. 너비는 200픽셀을 초과하지 않아야 하며 높이는 200픽셀보다 커야 합니다. 반대로 K=1이 너비를 제한하는 한 K
옵션 1: 자바스크립트의 Image() 객체를 사용하여 이미지를 동적으로 로드하고 이미지의 높이와 너비를 얻습니다.
<scriptlanguage="JavaScript" type="text/javascript">
<!--varimgObj;function checkImg(theURL){var width,height;var k;imgObj =new Image();
//创建对象；
imgObj.src = theURL;
if (typeof(imgObj) =="object"){if ((imgObj.width != 0) && (imgObj.height != 0)){width=imgObj.width; //是否已取得了图像的宽度；
height=imgObj.height;
//是否已取得了图像的高度；
k=width/height;
//获取图像比例值；
if(k>=1){
if (width>=200){
width=200;
height=width/k;
}}
else
{if (height>=200){
height=200;
width=k?height;
}
}
showimg(theURL,width,height);
}
else
setTimeout("checkImg('" + theURL + "')", 100)
//通过Image对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查。
}
}
functionshowimg(theURL,x,y){document.write("<imgsrc="+theURL+""+"width="+x+""+"height="+y+"border='0'"+""+"align='left'>");} //-->
</script>
<scriptlanguage="javascript">checkImg("Bt0085.jpg");
</script>결과: 코드를 홈페이지 파일(default.asp)에 이식했는데, 서버 테스트를 통과하면서 문제가 발생했습니다. URL을 입력하면 처리된 이미지가 먼저 브라우저에 나타납니다. 툴바에서 "뒤로"를 클릭하면 홈페이지 콘텐츠가 표시됩니다. 다시 테스트해보니 결과는 정상이었습니다. 사진이 업데이트될 때마다 동일한 현상이 발생하거나, 본 웹사이트를 방문하지 않은 컴퓨터가 열릴 때마다 동일한 문제가 발생합니다.
원인 분석: Image() 객체의 특성은 이미지 스크롤 효과를 얻기 위해 주로 사용됩니다. 이미지를 미리 클라이언트에 다운로드할 수 있으므로 이미지 간 전환에 시간 지연이 없습니다. 아래 코드와 같이 Image 객체의 src 속성을 이용하여 이미지의 경로(URL)를 지정하면 이미지 디렉터리에 있는 pic2.gif 이미지가 클라이언트로 다운로드됩니다. var myImg = newImage();myImg.src = "pic.gif";
이 코드는 브라우저가 서버에서 지정된 이미지를 강제로 다운로드하도록 합니다. 이 이미지가 클라이언트의 캐시(Cache)에 있으면 브라우저는 자동으로 덮어쓰게 됩니다. 이렇게 하면 사용자가 사진 위로 마우스를 이동하면 시간 지연 없이 사진이 즉시 변경됩니다. 그래서 처음에 사진이 표시되면 두 번째부터는 홈페이지 파일이 정상적으로 표시될 수 있는 것입니다. 이를 통해 Image() 객체를 사용하여 이미지의 속성을 얻을 수 없으며 문제 해결 방법을 변경해야 한다는 결론에 도달했습니다.
옵션 2: 의 ID를 사용하여 이미지의 너비와 높이를 정의합니다.
페이지의 요소는 표시 범위, 즉 이미지의 높이와 너비(너비)를 정의할 수 있습니다. 이미지. 처리 이벤트가 트리거되면 그래프의 두 가지 속성을 동적으로 변경하여 효과를 얻을 수 있습니다.
<script>
functionshow()
{var w,h;
var k;
var con;
w=smallslot.width;
h=smallslot.height;
k=w/h;
if(k>=1){
if (w>=200){
w=200;
h=w/k;
}}
else
{if(h>=150){
h=150;
w=k?h;
}
}
return w;
}
</script>
<imgborder=0 ID="smallslot" src="4.jpg" onload="javascript:width=x;"align="left">
<script languge="javascript">
varx=show();
</script>이 코드에서는 처리된 이미지의 너비가 show() 함수의 반환 값으로 사용됩니다. onload 이벤트를 사용하여 에서 이미지의 너비를 호출합니다.
문제: 홈페이지 사진뉴스의 사진이 표시되지 않습니다. 주소 표시줄의 "이동" 버튼을 클릭하면 정상적으로 표시됩니다. 연습이 또 다른 실패를 말해준다! 인터넷 사용자가 익숙한 유일한 일은 URL을 입력하고 Enter를 입력하는 것뿐이기 때문입니다. 이를 바탕으로 작성자는 다음과 같은 시도를 했습니다. (1)
와옵션 3: 페이지가 로드될 때 이벤트를 트리거하려면 의 Onload() 이벤트를
요소에서 사용됩니다. 여기서 IE가 이를 해석하면 "javascript:width=x;"를 트리거하기 위해 페이지를 로드해야 하므로 이미지를 표시하려면 페이지를 다시 로드해야 합니다. 또한 Onload()는 일반적으로 페이지를 로드할 때 트리거되는 이벤트를 미리 완료하기 위해 요소에서 사용됩니다. 그래서
의 Onload() 이벤트를 에 넣었습니다. 코드는 다음과 같습니다.
<body onload="window.smallslot.width=show();">
<script>
function show()
{…..
//show()
}
</script>
<img border=0 ID="smallslot"src="1.jpg" align="left">
this is atest! 再次测试，通过了，而且首页调用成功！我成功了！ 经过这次经历，让笔者感受到了从事程序开发工作的艰辛和乐趣！有时为了一个小小的问题折腾得茶饭不思，但成功的喜悦又让人溢于言表。任何事情只要自己能刻苦钻研、持之以恒，相信问题总会得到解决的。
위 내용은 JavaScript가 세 가지 방법을 사용하여 이미지 크기를 수정하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
