web-dev-qa-db-fra.com

Spécification de la largeur et de la hauteur sous forme de pourcentages sans modifier les proportions des photos au format HTML

Je me demandais si, dans les attributs de largeur et de hauteur, je pouvais spécifier la largeur et la hauteur sous forme de pourcentages?

Eh bien, je suppose que c'est évident, car lorsque j'essaie de le faire, cela redimensionne, mais cela semble fausser la qualité de mon image.

Voici un exemple de mon balisage avec des attributs fixes:

<img src="#" width="346" height="413">

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

<img src="#" width="50%" height="50%">

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

<img src="#" width="173" height="206.5">

Je pense que je me trompe fondamentalement sur mon pourcentage de majoration ou quelque chose parce qu'il y a une différence notable entre mon deuxième et troisième exemple sur le plan visuel.

MISE À JOUR: Hé, merci à tous pour tous les messages utiles!

En fait, j'aime beaucoup la suggestion de jQuery faite par Pat, car avec un extrait de code, il peut modifier le sélecteur et l'adapter à toutes les images affectées par ma fantaisie comme ceci:

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

C'est génial ça!

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

Cela fonctionne plutôt bien, compte tenu du fait qu'une fois connecté à ma base de données SQL Server, je ne peux appliquer que cet extrait de code jQuery à toutes les images de la classe FancyBox de mes pages de produits.

Merci les gars!

htmlimageresizesize
53
Qcom

Les largeurs en pourcentage de votre deuxième exemple s'appliquent en fait au conteneur votre <img> est présent et non la taille réelle de l'image. Disons que vous avez le balisage suivant:

<div style="width: 1000px; height: 600px;">
    <img src="#" width="50%" height="50%">
</div>

Votre image résultante aura 500 pixels de large et 300 pixels de haut.

jQuery Resize

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 simplement de supprimer tout attribut hauteur/largeur = 50%.

59
Pat

Vous pouvez définir l’un ou l’autre (mais pas les deux) et vous obtiendrez le résultat souhaité.

<img src="#" height="50%">
20
Fosco

Voici la différence:

Ceci définit l'image à la moitié de sa taille d'origine.

<img src="#" width="173" height="206.5">

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

<img src="#" width="50%" height="50%">

Par exemple, si vous définissez ce paramètre comme le seul élément de la page, il essaiera d’occuper 50% de la largeur de la page, ce qui le rendra potentiellement plus grand que sa taille originale - et non la moitié de sa taille originale comme prévu. .

Si elle est présentée avec une taille supérieure à la taille d'origine, l'image apparaîtra fortement pixellisée.

5
Fenton

width = "50%" et height = "50%" fixent les attributs width et height à la moitié de la largeur et de la hauteur de l'élément parent si je ne me trompe pas. Si vous utilisez des pourcentages, définissez également largeur ou hauteur uniquement sur le pourcentage de l'élément parent.

2
pkauko

Étant donné le manque d'informations concernant la taille de l'image d'origine, spécifier des pourcentages pour la largeur et la hauteur entraînerait des résultats très erratiques. Si vous essayez de vous assurer qu'une image tiendra dans un emplacement spécifique de votre page, vous devrez utiliser un code côté serveur pour gérer ce redimensionnement.

2
Lazarus

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);
2
Nalan Madheswaran

De W3Schools

La hauteur en pourcentage de l'élément conteneur (comme "20%").

Donc, je pense qu'ils veulent dire l'élément où se trouve la div?

1
JavaPete