La taille de l'image doit-elle être définie dans les attributs hauteur / largeur du tag img ou en CSS?
Est-il préférable de définir une taille d’image dans les attributs img et width de la balise height?
<img src="images/academia_vs_business.png" width="740" height="382" alt="" />
Ou dans le style CSS avec largeur/hauteur?
<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />
Ou les deux?
<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />
Je vais aller à contre-courant et affirmer que le principe de séparation du contenu de la mise en page (ce qui justifierait les réponses suggérant l'utilisation de CSS) ne s'applique pas toujours à la hauteur et à la largeur de l'image.
Chaque image a une hauteur et une largeur originales innées qui peuvent être déduites des données d'image. Dans le cadre du contenu par rapport à la mise en page, je dirais que ces informations de hauteur et de largeur dérivées sont du contenu, pas de la mise en page, et doivent donc être rendues au format HTML en tant qu'attributs d'élément.
Cela ressemble beaucoup au texte alt qui peut également être considéré comme dérivé de l’image. Cela conforte également l’idée qu’un agent utilisateur arbitraire (par exemple un navigateur vocal) devrait disposer de ces informations afin de les relier à l’utilisateur. Au minimum, le rapport de format pourrait s'avérer utile ("l'image a une largeur de 15 et une hauteur de 200"). De tels agents utilisateurs ne traiteraient pas nécessairement de CSS.
La spécification indique que les attributs width et height peuvent également être utilisés pour remplacer la hauteur et la largeur véhiculées dans le fichier image réel. Je ne suggère pas qu'ils soient utilisés pour cela. Pour remplacer la hauteur et la largeur, je pense que la meilleure approche est CSS (en ligne, intégré ou externe).
Donc, en fonction de ce que vous voulez faire, vous devez spécifier l’un et/ou l’autre. Je pense qu'idéalement, la hauteur et la largeur d'origine seraient toujours spécifiées en tant qu'attributs d'élément HTML, tandis que les informations de style devraient éventuellement être transmises en CSS.
La raison historique pour définir la hauteur/largeur dans les balises est que les navigateurs peuvent dimensionner le <img> éléments de la page avant même que les ressources CSS et/ou image ne soient chargées. Si vous ne fournissez pas explicitement hauteur et largeur, le <img> L'élément sera rendu à 0x0 jusqu'à ce que le navigateur puisse le dimensionner en fonction du fichier. Lorsque cela se produit, cela provoque un reflet visuel de la page une fois l'image chargée et est aggravé si vous avez plusieurs images sur la page. Dimensionnement du <img> via hauteur/largeur crée un espace réservé physique dans le flux de pages à la taille appropriée, permettant ainsi à votre contenu de se charger de manière asynchrone sans perturber l'expérience utilisateur.
Alternativement, si vous utilisez une conception mobile, ce qui est une pratique exemplaire de nos jours, il est assez courant de spécifier une largeur (ou une largeur maximale) niquement et de définir la hauteur comme suit: auto. Ainsi, lorsque vous définissez des requêtes multimédia (CSS, par exemple) pour différentes largeurs d’écran, vous pouvez simplement ajuster la largeur de l’image et laisser le navigateur s’occuper de maintenir le rapport hauteur/aspect de l’image correct. Il s’agit en quelque sorte d’une approche intermédiaire, car vous pouvez obtenir un peu de refusion, mais cela vous permet de prendre en charge une large gamme de tailles d’écrans, de sorte que les avantages l'emportent généralement sur les inconvénients.
Enfin, il peut arriver que vous ne connaissiez pas la taille de l'image à l'avance (image src peut être chargé de manière dynamique ou peut changer au cours de la durée de vie de la page via un script), auquel cas l'utilisation de CSS n'a de sens.
En fin de compte, vous devez comprendre les compromis et décider quelle stratégie est la plus sensée pour ce que vous essayez d'atteindre.
Bien qu'il soit correct d'utiliser des styles en ligne, il peut être préférable de servir votre objectif en incluant un fichier CSS externe sur la page. De cette manière, vous pouvez définir une classe d’images (par exemple, "Vignette", "Photo", "Grand", etc.) et lui attribuer une taille constante. Cela vous aidera lorsque vous vous retrouvez avec des images nécessitant le même placement sur plusieurs pages.
Comme ça:
Dans votre en-tête:
<Link type = "text/css" rel = "stylesheet" href = "css/style.css" />[.____. Page_ HTML:
<Img class = "thumbnail" src = "images/academia_vs_business.png" alt = "" />
.. ] img.thumbnail {
width: 75px;
height: 75px;
}
Toutefois, si vous souhaitez utiliser des styles en ligne, il est probablement préférable de définir la largeur et la hauteur en utilisant l'attribut style pour des raisons de lisibilité.
<img id="uxcMyImageId" src"myImage" width="100" height="100" />
spécifier la largeur et la hauteur dans la balise image est une bonne pratique. De cette manière, lors du chargement de la page, un espace est alloué pour l'image et la mise en page ne subit aucune secousse, même si le chargement de l'image prend beaucoup de temps.
Certainement pas les deux. Autre que cela, je dois dire que c'est une préférence personnelle. J'utiliserais le CSS si j'avais plusieurs images de la même taille pour réduire le code.
.my_images img {width: 20px; height:20px}
À long terme, CSS risque de l'emporter en raison de la dépréciation d'attributs HTML et plus probablement en raison de la croissance des formats d'images vectorielles tels que SVG, où il peut s'avérer judicieux de redimensionner les images à l'aide d'unités non pixels telles que% ou em.
J'utilise contentEditable pour autoriser l'édition de texte enrichi dans mon application. Je ne sais pas comment cela glisse, mais quand une image est insérée, puis redimensionnée (en faisant glisser les ancres sur le côté), cela génère quelque chose comme ceci:
<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>
(Les tests ultérieurs ont montré que les images insérées ne contenaient pas ce style "voyou" attr + param).
Lorsque rendu par le navigateur (IE7), la largeur et la hauteur du style ont priorité sur le paramètre img width/height (l'image est donc affichée comme je le voulais. Redimensionnée à 55px x 55px. Donc tout s'est bien passé, semble-t-il.
Lorsque j'exporte la page dans un document ms-Word en définissant le type mime application/msword ou en collant le rendu du navigateur dans le document msword, toutes les images retrouvent leur taille par défaut. J'ai finalement découvert que msword abandonne le style et utilise les balises img width et height (qui ont la valeur de la taille de l'image d'origine).
Il m'a fallu un certain temps pour découvrir ceci. Quoi qu'il en soit ... j'ai codé une fonction javascript pour parcourir toutes les balises et "transférer" les valeurs img style.width et style.height dans img.width et img.height, puis en effaçant les deux valeurs avec style avant de poursuivre. enregistrement de cette donnée HTML/Richtext dans la base de données.
à votre santé.
opps .. ma réponse est ... non. laissez les deux attributs directement sous img, plutôt que style.
Option a. Simple droite droite. Ce que vous voyez est ce que vous obtenez facilement pour faire des calculs.
Option b. Trop désordonné pour le faire en ligne, sauf si vous voulez avoir un site qui peut s'étirer. IE si vous avez utilisé le with:86em Cependant, les navigateurs modernes semblent gérer cette fonctionnalité de manière adéquate pour mes besoins. Personnellement, la seule fois où je voudrais utiliser quelque chose comme ceci est si je devais créer un catalogue de vignettes.
/*css*/
ul.myThumbs{}
ul.myThumbs li {float:left; width:50px;}
ul.myThumbs li img{width:50px; height:50px;border:0;}
<!--html-->
<ul><li>
<img src="~/img/products/thumbs/productid.jpg" alt="" />
</li></ul>
Option c. Trop compliqué à entretenir.