web-dev-qa-db-fra.com

HTML5 - Puis-je utiliser la largeur et la hauteur dans IMG?

Il est légal d'utiliser ce code:

<img src="...(here image)...." width="50px" height="50px" />

Ou je dois utiliser:

<img src="...(here image)..." style="width: 50px; height: 50px;" />
html5heightwidthimage
23
Daniel

La première utilisation est recommandée comme conseils pour le rendu du navigateur, la seconde fonctionne.

Dans le premier formulaire, vous ne devez pas ajouter "px".

http://www.w3.org/TR/html5/embedded-content-0.html#dimension-attributes

37
TuteC

Selon la spécification HTML 5:

Les attributs width et height sur img ... peuvent être spécifiés pour donner les dimensions du contenu visuel de l'élément

Source: http://www.w3.org/TR/2011/WD-html5-20110113/the-map-element.html#dimension-attributes

Toujours selon la spécification HTML 5, tous les éléments peuvent avoir des attributs de style. Source: http://www.w3.org/TR/html5/elements.html#the-style-attribute

Par conséquent, puisque les deux sont autorisés, vous êtes libre de choisir celui qui vous convient.

6
erisco

Le CSS appliqué à "img" remplacera les attributs de base de largeur et de hauteur html sur les balises d'image.

<style>
   img {
      width: 100%;
      height: auto;
   }
</style>

<img src="assets/img/logo.png" width="500" height="100">

Le code ci-dessus se traduira par une image qui s'étend sur toute la largeur de son conteneur, et sa hauteur sera relationnelle à sa largeur.

Cette approche est utile si vous chargez des graphiques adaptés à la rétine dès le départ.

3
Stacks on Stacks on Stacks

Comme déjà mentionné :

  • Écraser CSS <img> attrinutes dans le cas où les deux sont présents,
  • <img> attrinutes ne sont que des conseils pour le navigateur.

Une autre différence est l'utilisation des unités:

  • dans HTML5 les attributs width et height doivent être des entiers sans unités, qui sont interprétés comme des pixels CSS. En pratique, les brouwsers tolèrent % (qui était valide dans HTML4 ), mais si vous mettez quelque chose comme width="5cm" il sera interprété comme width="5" (c'est à dire. 5px).
  • Lorsque vous utilisez CSS, toutes les unités de longueur et les nombres non entiers sont autorisés, par exemple width: 5.5cm est ok. Et vous devez utiliser des unités (par exemple width: 5 n'est pas une largeur CSS valide).

Donc, IMO, vous devriez utiliser CSS si possible.

2
Kpym

Le style = way est préféré ... en fait, il serait encore mieux si vous déplaciez ce style dans un fichier CSS ou une balise de style dans votre en-tête.

1
ar3