如何在保持寬高比的同時按比例調整影像大小？

如何按比例調整影像大小

按比例調整影像大小是一項常見任務，可用於將影像調整為特定尺寸，同時保持其寬高比比率。這在處理需要一致顯示的不同尺寸的影像時特別有用。

要使用jQuery 按比例調整影像大小，可以使用以下程式碼：

<code class="javascript">$('img').css({
  'max-width': '100%',
  'max-height': '100%',
  'width': 'auto',
  'height': 'auto'
});</code>

此程式碼將影像的最大寬度和高度設定為100%，這允許影像按比例縮放以適應這些尺寸。將“width”和“height”屬性設為“auto”以保持原始寬高比。

在保留影像寬高比的同時計算影像適當尺寸的另一種方法是使用calculateAspectRatioFit()函數：

<code class="javascript">function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}</code>

此函數獲取影像的原始寬度和高度以及最大可用寬度和高度，並計算將寬高比保持在指定限制內的新寬度和高度。

以上是如何在保持寬高比的同時按比例調整影像大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！