썸네일 생성 작업을 프로그램에 맡기면 효과가 훨씬 더 좋을 것이라는 것을 알고 있습니다. 그러나 때로는 서버가 GD를 지원하지 않는 등의 특정 요인으로 인해 CSS에 요청하는 것이 불가피할 수도 있습니다.
최신 브라우저의 경우 큰 이미지를 특정 크기로 축소하려면 max-width 및 max-height CSS 속성을 사용하면 됩니다.
IE 6.0 이하에서는 위의 두 CSS 속성이 무시됩니다. 이전에는 이런 종류의 문제를 처리하기 위해 종종 Javascript를 사용하고 이미지에 onload 이벤트를 추가했습니다. 예를 들어:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<scripttype="텍스트/자바스크립트">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
이렇게 하면 확실히 문제가 해결될 수 있지만 향후 페이지를 업그레이드할 때 문제가 발생할 수 있습니다. 브라우저가 CSS에 대한 지원을 향상함에 따라 조만간 이미지에서 모든 onload 이벤트가 제거될 것입니다. Expression의 Show Time입니다. IE는 Expression을 통해 CSS에 일부 스크립트 배치를 지원하고 이 스크립트는 IE 6.0 이하에서만 사용할 수 있으므로 Expression에 작성하는 것이 적합합니다.
마지막으로 큰 이미지를 50px*50px 이내로 축소하려면 다음 CSS를 참조하세요.
.thumb이미지{
최대 너비:50px;
최대 높이:50px;
}
*html.thumb이미지{
width:expression(this.width>50&&this.width>this.height?50:auto);
높이:표현식(this.height>50?50:auto);
}
