javascript는 이미지 크기 구현을 동적으로 조정합니다. code_image 특수 효과

얼마 전에 쓴 글에서 이런 일이 있었습니다. 나중에 CSS 오버플로 및 max-width 속성을 사용하여 페이지 변형 문제를 일시적으로 해결했습니다. 이 방법의 장점은 간단하다는 점이지만, 일부 세부 사항의 효과가 손상된다는 단점이 있습니다.

Overflow: Hidden과 같은 것은 내부 요소의 너비가 상위 프레임보다 클 때 초과 너비가 숨겨짐을 의미합니다. 이로 인해 일부 내용이 갑자기 끊겨서 숨겨지는 경우가 있어 시청자 여러분께 안타까운 일이 아닐 수 없습니다.

max-width 속성을 통해 기사 일러스트레이션의 최대 너비를 제한하는 경우 각 브라우저의 호환성을 고려해야 합니다. IE6은 이 속성을 지원하지 않습니다. 제 생각에는 일부 브라우저가 이 속성을 지원하지만 이미지 크기가 비례적으로 조정되지 않습니다. (Safari와 Opera인 것 같은데, 그렇게 하면 해로울 것입니다.) 이 브라우저의 사용자에게는 매우 불공평합니다.

그래서 결국 제가 선택한 것은 자바스크립트를 통해 이미지 크기를 동적으로 변경하는 것이었습니다. 이 방법은 다양한 브라우저와 호환성이 좋으며(요즘 JavaScript를 비활성화하는 사람은 거의 없겠죠?), 테마가 변경되면 기사 그림의 최대 크기도 유연하게 변경할 수 있습니다.

제가 사용하는 테마는 jQuery 라이브러리와 함께 로드되므로 두 가지 옵션이 있으므로 다음 코드로 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$(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) // 높이 설정 균등 스케일링 후
}
}) ;
})

jQuery 라이브러리를 로드하지 않으려면 다음 코드를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function ResizeImage(이미지, 그림의 최대 너비, 최대 높이 그림)
{
if (image.className == "Thumbnail")
{
w = image.width;
h = image.height
if( w = = 0 || h == 0 )
{
image.width = maxwidth;
image.height = maxheight;
else if (w > h)
{
if (w > maxwidth) image.width = maxwidth;
}
else
{
if (h > maxheight) image.height = maxheight; >image.className = "ScaledThumbnail";
}
}


순수한 JavaScript를 사용하는 경우에는 이미지에 class="Thumbnail"을 수동으로 추가해야 합니다. , 그러나 최종 효과는 동일합니다.