JavaScript를 사용하여 이미지 표시 크기를 동적으로 변경하는 방법에 대한 샘플 코드

배경에서 전송된 다양한 크기의 여러 사진을 표시하려면 사진 크기의 일관성과 비율 조정을 보장하기 위해 사진 표시 크기를 동적으로 변경해야 합니다. 검색을 통해 인터넷에서 이 기능을 구현한 jQuery 코드를 아래와 같이 찾을 수 있다. 이 코드는 이미지의 크기를 특정 범위 내에서 유지할 수 있습니다. 이미지의 원래 크기가 max* 값보다 크면 표시되는 이미지의 너비가 동일해집니다.

$(document).ready(function() {
     $('.post img').each(function() {
     var maxWidth = 100; // 图片最大宽度
     var maxHeight = 100; // 图片最大高度
     var ratio = 0; // 缩放比例
     var width = $(this).width(); // 图片实际宽度
     var height = $(this).height(); // 图片实际高度
   
     // 检查图片是否超宽
     if(width > maxWidth){
         ratio = maxWidth / width; // 计算缩放比例
         $(this).css("width", maxWidth); // 设定实际显示宽度
         height = height * ratio; // 计算等比例缩放后的高度 
         $(this).css("height", height); // 设定等比例缩放后的高度
     }
   
     // 检查图片是否超高
     if(height > maxHeight){
         ratio = maxHeight / height; // 计算缩放比例
         $(this).css("height", maxHeight); // 设定实际显示高度
         width = width * ratio; // 计算等比例缩放后的高度
         $(this).css("width", width * ratio); // 设定等比例缩放后的高度
     }
 });
 });

다양한 브라우저에서 효과를 테스트한 결과 이 ​​작성 방법이 Chrome 브라우저에 적용되지 않고 이미지가 원래 크기로 표시되는 버그가 발생하는 것으로 나타났습니다. 이미지 리소스가 아직 로드되지 않은 경우에도 HTML 문서가 로드되고 DOM이 준비되면 문서 준비 이벤트가 실행되기 시작합니다. 인터넷에는 $(window).load() 메소드로 래핑하면 크롬 브라우저에서 잘못 표시되는 문제를 해결할 수 있다는 말이 있습니다------윈도우 로드 이벤트는 조금 늦게 실행되어 사용됩니다. 프레임을 포함한 전체 페이지에서 객체와 이미지가 로드된 후에 실행이 시작됩니다. 이러한 차이로 인해 Chrome 브라우저가 이미지 처리를 위해 $(window).load() 메서드를 사용하지 않는 경우 이미지를 로드하고 이미지를 동적으로 변경하는 js 코드의 실행 순서가 불확실하다는 것을 분석할 수 있습니다.

최근 작업 중인 실내 사진 모듈에서는 실내 사진을 배경에서 로드하여 페이지에 표시해야 합니다. 사진 크기의 일관성과 비율의 조화를 보장하려면 사진 표시 크기가 필요합니다. 동적으로 변경한 다음 크기가 조정된 실내 사진에 해당 AP 위치를 표시합니다. 여기에는 세 가지 단계가 있습니다.
1. Ajax 요청 보내기, 로드해야 하는 실내 이미지의 URL 가져오기, DOM 업데이트 및 실내 이미지 표시
2. 이미지 표시 크기를 동적으로 변경
3. 실내 이미지에 해당 AP 위치 좌표
처음에는 이렇게 했습니다.
ajax 요청을 보내고 반환 성공 함수에서 이미지 표시 크기를 동적으로 변경하고 ajax 요청을 보내 해당 ap 위치 좌표를 실내 지도에 표시합니다. 최종 결과는 이미지가 원래 크기로 표시되는 것입니다. 제가 조정한 방법은 다음과 같습니다.
ajax 요청을 보내고 반환 성공 함수에서

var img= new Image();
    img.src = url;
    img.onload = function(){
    // 需要执行的程序
         动态改变图片实现尺寸并发送ajax请求在室内图上显示对应的ap位置坐标
    }

결과 이미지는 크기를 동적으로 변경한 후 표시됩니다.

위 내용은 JavaScript를 사용하여 이미지 표시 크기를 동적으로 변경하는 방법에 대한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!