Comment redimensionner les images proportionnellement tout en conservant les proportions ?

Comment redimensionner les images proportionnellement

Le redimensionnement proportionnel des images est une tâche courante qui peut être utilisée pour ajuster les images dans des dimensions spécifiques tout en conservant leur aspect. rapport. Ceci est particulièrement utile lorsque vous travaillez avec des images de différentes tailles qui doivent être affichées de manière cohérente.

Pour redimensionner une image proportionnellement à l'aide de jQuery, vous pouvez utiliser le code suivant :

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

Ce code définit la largeur et la hauteur maximales de l'image à 100 %, ce qui permet à l'image d'être mise à l'échelle proportionnellement pour s'adapter à ces dimensions. Les propriétés « largeur » et « hauteur » sont définies sur « auto » pour conserver le rapport hauteur/largeur d'origine.

Une autre méthode pour calculer les dimensions appropriées d'une image tout en préservant son rapport hauteur/largeur consiste à utiliser calculateAspectRatioFit(). fonction :

<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>

Cette fonction prend la largeur et la hauteur d'origine de l'image, ainsi que la largeur et la hauteur maximales disponibles, et calcule la nouvelle largeur et la nouvelle hauteur qui maintiennent le rapport hauteur/largeur dans les limites spécifiées.

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!