jqueryはページ画像を同じ割合で拡大・縮小する機能を実装します_jquery

HTML コード構造:

コードをコピー コードは次のとおりです。

スタイル:

コードをコピー コードは次のとおりです:

a{width:300px;height:300px ;background: #fff;border:1px Solid #666;display:inline-block} /* ここでは、a タグの高さと幅を指定する必要があります。背景と境界線はオプションです*/
Script (jquery は自分で追加してください):

コードをコピー コードは次のとおりです。

$(function () {
var imgs = $('a>img');
imgs.each(function () {
var img = $(this);
var width = img.attr('width');/ /エリア幅
var height = img.attr('height');//領域高さ
var showWidth = width;//最終表示幅
var showHeight = height;//最終表示高さ
var 比 = 幅 / 高さ;//アスペクト比
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('width', showWidth) .css('margin-left', (width - showWidth);
/ .attr('height', showHeight).css('margin-top', (height - showHeight) / 2);
>
。
このようにして、画像が同じ割合で拡大・縮小されます。