Comment conserver les proportions de l'image lors du redimensionnement dans jQuery ?

Conserver les proportions de l'image pendant le redimensionnement

Le maintien des proportions de l'image pendant le redimensionnement garantit que le rapport hauteur/largeur d'origine est préservé. Ceci est important pour éviter les distorsions et maintenir l’impact visuel souhaité de l’image. Dans jQuery, cela peut être réalisé en utilisant diverses techniques.

Une technique consiste à utiliser la fonction calculateAspectRatioFit, qui accepte les dimensions de l'image originale ainsi que la largeur et la hauteur maximales autorisées. La fonction calcule la nouvelle largeur et hauteur tout en préservant les proportions. Ces valeurs calculées peuvent ensuite être utilisées pour redimensionner l'image en conséquence.

Le code de cette fonction est fourni ci-dessous :

<code class="javascript">/**
 * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
 * images to fit into a certain area.
 *
 * @param {Number} srcWidth width of source image
 * @param {Number} srcHeight height of source image
 * @param {Number} maxWidth maximum available width
 * @param {Number} maxHeight maximum available height
 * @return {Object} { width, height }
 */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

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

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

En utilisant cette fonction, les développeurs peuvent redimensionner les images tout en s'assurant que leur les proportions restent intactes, offrant une expérience visuelle cohérente et non déformée sur différentes tailles d'affichage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!