Spécifier la largeur et la hauteur sous forme de pourcentages sans fausser les proportions de photos en HTML

Je me demandais si dans les atsortingbuts de largeur et de hauteur, je pouvais spécifier la largeur et la hauteur en pourcentage?

Eh bien, je suppose que c’est évident, parce que quand j’essaie, ça redimensionne, mais cela semble fausser la qualité de mon image.

Voici un exemple de mon marquage avec des atsortingbuts fixes:

 

Maintenant, tout en essayant de réduire cela, disons de moitié, via des pourcentages:

  

Je reçois quelque chose de complètement différent de:

  

Je pense que je suis fondamentalement en train de confondre mon pourcentage de marge ou quelque chose car il existe une différence notable entre mon deuxième et mon troisième exemple.

MISE À JOUR: Hey merci à tous pour tous les messages utiles!

J’aime vraiment la suggestion de jQuery faite par Pat, car avec un extrait, comme il l’a suggéré, je peux réellement modifier le sélecteur et l’appliquer à toutes les images affectées de fancybox telles que:

 $('img.FancyBox').each(function(){ $(this).width($(this).width() * 0.25); }); 

C’est génial!

Vous pouvez vérifier l’effet en direct ici sur mon site: http://www.marioplanet.com/product.htm

Cela fonctionne plutôt bien, compte tenu du fait qu’une fois connecté à la firebase database SQL Server, je peux simplement appliquer cet extrait de code jQuery à toutes les images de la classe FancyBox sur les pages de mes produits.

Merci les gars!

Ces largeurs de pourcentage dans votre 2ème exemple s’appliquent réellement au conteneur dans trouve votre et non à la taille réelle de l’image. Disons que vous avez le balisage suivant:

 

Votre image résultante aura une largeur de 500px et une hauteur de 300px.

jQuery Redimensionner

Si vous essayez de réduire une image à 50% de sa largeur, vous pouvez le faire avec un extrait de jQuery:

 $( "img" ).each( function() { var $img = $( this ); $img.width( $img.width() * .5 ); }); 

Assurez-vous d’abord de retirer les atsortingbuts height / width = 50% en premier.

Vous pouvez définir l’un ou l’autre (mais pas les deux), ce qui devrait vous donner le résultat souhaité.

  

Voici la différence:

Cela définit l’image à la moitié de sa taille d’origine.

  

Cela définit l’image sur la moitié de sa zone de présentation disponible.

  

Par exemple, si vous mettez cela comme seul élément sur la page, il tentera de prendre 50% de la largeur de la page, la rendant ainsi potentiellement plus grande que sa taille d’origine – pas la moitié de sa taille d’origine. .

Si elle est présentée à une taille supérieure à la taille d’origine, l’image apparaîtra fortement pixélisée.

width = “50%” et height = “50%” définit les atsortingbuts width et height sur la moitié de la largeur et de la hauteur de l’élément parent si je ne me trompe pas. La définition de la largeur ou de la hauteur doit également définir la largeur ou la hauteur comme pourcentage de l’élément parent, si vous utilisez des pourcentages.

Étant donné le manque d’informations sur la taille de l’image originale, la spécification de pourcentages pour la largeur et la hauteur entraînerait des résultats très irréguliers. Si vous essayez de vous assurer qu’une image correspondra à un emplacement spécifique sur votre page, vous devrez utiliser un code côté serveur pour gérer cette redimensionnement.

De W3Schools

La hauteur en pourcentage de l’élément contenant (comme “20%”).

Donc, je pense qu’ils signifient l’élément où la div est dans?

Essayez d’utiliser la propriété scale dans css3:

75% de l’original:

 -moz-transform:scale(0.75); -webkit-transform:scale(0.75); transform:scale(0.75); 

50% de l’original:

 -moz-transform:scale(0.5); -webkit-transform:scale(0.5); transform:scale(0.5); 

Il y a en fait un moyen de faire cela avec le HTML seulement. Juste définit: