Comment définir la hauteur maximale de $img, mais garder les proportions

Comment mettre le maximum de la hauteur ou de largeur de:

$img_attributes= ' height=100 largeur=100 '. 'alt="'.$produit['nom_produit'].'"';

Vous parlez en PHP ou HTML? En HTML, vous pouvez définir juste à la hauteur et ne pas mentionner la largeur. Si votre en PHP, vous avez besoin d'une fonction comme AlbertEins

OriginalL'auteur Chris | 2009-12-22

  1. 17

    Bien, il y a la max-height et max-width propriétés CSS, n'est-ce pas? Ils travaillent dans tous les principaux navigateurs sauf IE 6 et IE 7.

    Salut Pekka, je n'ai pas encore testé, mais cela peut-il fonctionner? $img_attributes= ' max-height=100 max-width=100 '. 'alt="'.$produit['nom_produit'].'"';
    Non, vous devez ajouter un style: style='max-height: 100px; max-width: 100px'
    Pour que cela fonctionne, vous ne devez pas définir la largeur ou de la hauteur de la balise img.
    vous pouvez, mais il doit être d'une taille relative (%)
    Si j'utilise max-height et max-width css, il fonctionne. Mais si j'utilise les deux sur le même objet, les deux sont ignorés.

    OriginalL'auteur Pekka 웃

  2. 4

    Vous devriez vérifier cette réponse pour des informations générales : Proportionnelle image redimensionner.

    Si vous voulez avoir une image redimensionnée sans utiliser côté serveur, je vous suggère à l'utilisateur de Javascript. Voici une tutoriel.

    En bref, vous avez une fonction JavaScript qui sera de retour à la nouvelle Largeur et la Hauteur:

    function scaleSize(maxW, maxH, currW, currH){
  var ratio = currH / currW;
  if(currW >= maxW){
        currW = maxW;
        currH = currW * ratio;
  } else >if(currH >= maxH){
        currH = maxH;
        currW = currH / ratio;
  }
  return [currW, currH];
}

    Avec cette fonction, vous pouvez définir la largeur de l'image et de la hauteur:

    img.width = newW;
img.height = newH;

    Mais, le meilleur moyen serait de le faire à côté serveur. Cela permettra d'éviter d'avoir un effet bizarre sur le côté client.

    OriginalL'auteur Patrick Desjardins

  3. 2

    Le style suivant sera la cause de toutes les images à l'aide de la "MaxSized" classe css pour avoir un max de hauteur de 100px et une largeur de 100px. Si une image est plus petite, il ne sera pas tendue.

    <style>
IMG.MaxSized
{
max-width: 100px;
max-height: 100px;
}
</style>

    Comme mentionné par Pekka, vous devez avoir un XHTML 1.0 Strict de la DTD dans l'ordre pour que cela fonctionne dans les versions modernes de IE, mais je crois personnellement que c'est l'approche appropriée.

    problème est que si l'image est plus grande à la fois en largeur et en hauteur, mais pas de place.
    Vous allez obtenir une sorte de boucle, alors?
    Qui n'a pas d'importance. Si vous voulez limiter la hauteur ou de la largeur, vous pouvez le faire avec le max-height et max-width styles. Si l'image est plus grande à la verticale, elle sera limitée à la hauteur maximale spécifiée et mise à l'échelle appropriée. En va de même pour la largeur. L'échelle ne change pas.
    Je ne suis pas sûr de ce que tu veux dire par boucle? Je parle du CSS, pas de code. Le CSS limites de la taille d'affichage de l'image. Il est déterminé sur le côté client, pas côté serveur et n'a pas vraiment d'avoir un chemin d'exécution pour qu'il la boucle.

    OriginalL'auteur Brian Hasden

  4. 0

    Que la réponse sommet dit, vous pouvez utiliser max-height ou max-width propriétés CSS. Mais ces propriétés ne se comportent pas de la même manière. Pour garder le ratio de l'image, vous devez définir la hauteur et la largeur à 100%, puis définissez max-width. Si vous définissez max-height le ratio n'est pas conservé.

    Donc:

    <img src="image.png" style="height: 100%; width: 100%; max-width: 400px" alt=" "/>

    ne conserver le ratio, mais

    <img src="image.png" style="height: 100%; width: 100%; max-height: 400px" alt=" "/>

    ne le fait pas. C'est parce que (comme j'ai compris) HTML allons d'abord définir la largeur et la hauteur. Ainsi, dans le deuxième cas, la largeur est fixée à 100%, mais la hauteur est limitée, ce qui pourrait entraîner la distorsion de l'image. Dans le premier cas, la largeur est définie avec une limite maximale, et la hauteur est ajustée en conséquence, donc en préservant les dimensions de l'image.

    OriginalL'auteur Joris Meys