CSS를 사용하여 이미지 크기를 조정하는 방법에 대한 예제 코드 공유

일반적으로 이미지 에 대한 CSS 속성을 설정하여 높이와 너비를 정의할 수 있습니다. 하지만 때로는 표시되는 이미지의 최대 크기만 제어하고 싶을 때도 있습니다. 이러한 작업에는 일반적으로 두 가지 방법이 있습니다. 1. CSS 속성 값을 직접 사용합니다. 2. JavaScript를 사용하여 CSS 값을 동적으로 설정합니다.

1. 고정 크기
일반적으로 이미지의 크기를 제한하기 위해 다음 HTML 속성 값 또는 CSS 속성 값을 사용하여 정의합니다.

<img  src="/static/imghwm/default1.png"  data-src="http://www.linuxfly.org/logo.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" border="0" alt="CSS를 사용하여 이미지 크기를 조정하는 방법에 대한 예제 코드 공유" >
img {
    width: 600px;
    height: 500px;
}

하지만 이것은 설정이 너무 엄격하고 유연성이 충분하지 않습니다.

2. CSS 속성 값 사용 ​​

img.qtipImg {
    max-width: 500px; 
    width: 500px;
    width:expression(this.width > 500 ? "500px" : this.width);
    overflow:hidden;
}

여기서는 max-width 속성을 통해 500px 너비 범위 내에서 이미지를 제어하기 위해 CSS 규칙을 사용하여 qtipImg 클래스 아래에 img 태그를 정의하는데, 이는 다음과 같습니다. 비율에 맞게 조정됩니다.
그러나 다양한 브라우저에서 이 속성을 지원하는 방식이 일관되지 않습니다. 예를 들어 IE6은 이 속성을 지원하지 않습니다.
그래서 나중에 추가되는 표현식 액션은 연산자 뒤의 괄호 안의 구문으로, 이미지 크기를 동적으로 조정하는 데 사용됩니다.
마지막 오버플로:숨김은 위의 두 속성 정의가 유효하지 않을 때 설정된 크기를 초과하는 부분이 숨겨지지 않도록 하여 표시 예외를 방지하는 것입니다.
이 설정은 테스트되었으며 IE7, IE8 및 FireFox 3.5에서 정상적으로 작동합니다.

3. JavaScript 스크립트 사용
각 브라우저(다른 버전 포함)는 CSS를 다르게 지원합니다. 예: IE 8에서는 표현식 작업에 대한 지원이 취소되었습니다. 이때 자바스크립트를 이용해 이미지 크기를 조절하는 것도 좋은 방법이다. 그러나 그 결점은 순수 JavaScript 스크립트를 사용하면 이미지 다운로드 중에 크기가 오버플로되고 JavaScript는 다운로드가 완료될 때까지 크기를 적절한 값으로 조정하지 않는다는 것입니다.
1. 전송된 이미지 객체 사용
두 가지 JavaScript 함수:

function getImageSize(FilePath) {   
  var imgSize={width:0,height:0};   
  image=new Image();   
  image.src=FilePath;   
  imgSize.width = image.width;   
  imgSize.height = image.height;   
  return imgSize;   
}
function fixImageSize(originalImage) {
  fixSize = 500;
  if ( originalImage.width > fixSize ) {
    originalImage.height = Math.round( originalImage.height * fixSize / originalImage.width );
    originalImage.width = fixSize;
  }
  return originalImage;
}

사용 시 이미지의 주소를 이 두 함수에 전달하고 반환 값은 조정된 이미지입니다.

img = getImageSize("http://www.linuxfly.org/logo.gif");
img = fixImageSize(img);
finalresult = &#39;<img src="/static/imghwm/default1.png"  data-src="&#39;+attachUrl+&#39;"  class="lazy"      style="max-width:90%" height="&#39;+img.height+&#39;" alt="&#39;+filename+&#39;"/>&#39;;

2 .DOM을 로딩한 후 크기를 조정하세요
CSS 표현 방식은 취소되겠지만, 아직은 JavaScript를 직접 사용하여 적절한 CSS 값을 계산하는 것이 좋은 방법입니다. 예를 들어 jQuery의 $(document).ready() 메서드는 이미지를 로드할 때 오버플로 문제를 방지할 수 있습니다.
다음 스크립트의 출처: 여기

$(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 * ratio);  // 设定等比例缩放后的高度
    }

    // 检查图片是否超高
    if(height > maxHeight){
        ratio = maxHeight / height; // 计算缩放比例
        $(this).css("height", maxHeight);   // 设定实际显示高度
        width = width * ratio;    // 计算等比例缩放后的高度
        $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
    }
  });
});

위 내용은 CSS를 사용하여 이미지 크기를 조정하는 방법에 대한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!