jquery는 동일한 비율로 페이지 이미지를 확대 및 축소하는 기능을 구현합니다._jquery

html 코드 구조:

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

스타일:

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

a{너비:300px;높이:300px ;배경: #fff;border:1px solid #666;display:inline-block} /* 여기서는 태그의 높이와 너비를 지정해야 하며, 배경과 테두리는 선택 사항입니다*/
스크립트(jquery는 직접 추가하세요):

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

$(function () {
var imgs = $('a>img');
imgs.each(function () {
var img = $(this);
var width = img.attr('width');/ /area width
var height = img.attr('height');//지역 높이
var showWidth = width;//최종 표시 너비
var showHeight = height;//최종 표시 높이
var ratio = 너비 / 높이;//종횡비
img.load(function () {
var imgWidth, imgHeight, imgratio;
$('').attr( 'src', img.attr('src')).load(function () {
imgWidth = this.width;//사진의 실제 너비
imgHeight = this.height;//실제 사진 높이
imgRatio = imgWidth / imgHeight;//실제 화면 비율
if (ratio > imgRatio) {
showWidth = height * imgRatio;//조정된 너비가 너무 작습니다
img. attr('너비', showWidth) .css('margin-left', (너비 - showWidth) / 2);
                                                                         .attr('height', showHeight).css('margin-top', (높이 - showHeight) / 2);
                                                                    >


이런 방식으로 이미지가 동일한 비율로 확대 및 축소됩니다.