L'élément HTML <img> peut avoir la hauteur attribut width /, et il peut aussi avoir la CSS largeur/hauteur propriétés.Quelle est la différence entre l'attribut HTML width/height et la propriété CSS width/height de l'élément img?
<img src="xxx.img" width="16" height="16"
style="width: 16px; height: 16px"></img>
Quelle est la différence entre l'attribut HTML et la propriété CSS et devraient-ils avoir le même effet?
Un débat houleux sur le sujet peuvent être trouvés ici: Width attribute for image tag versus CSS
Pour résumer:
Le gain de déclarer une valeur de largeur et une valeur de hauteur (qui ne peut être la dimensions physiques originales de l'image) ou à partir des déclarations css (comme la largeur: [valueX]; hauteur: [valueY];) est que cela permet d'accélérer le rendu de la page. Le navigateur sait combien d'espace pour allouer un zone particulière de la page: il sera même dessiner des espaces réservés d'image sur un premier tirage , un premier parsing + rendu de la page. Quand on ne définit pas toute la largeur et la hauteur, puis le navigateur doit télécharger l'image et puis comprendre ses dimensions, l'espace à allouer puis redessiner la page.
Cela semble être l'effet le plus bénéfique à mon avis.
vous pouvez essayer cette
<img src="some_pic.jpg" width="100" />
sa hauteur sera de taille automatique.
et ce
<img src="some_pic.jpg" style="width:100px" />
sa hauteur ne sera pas automatique du format.
essayer un peu plus, et vous savez la différence
Quoi de taille auto? Les deux propriétés sont les mêmes. – Marko
Je l'essaie tout de suite. c'est pareil. désolé pour mon erreur. –
L'avez vous essayé? Définir 1 des propriétés en CSS (soit la largeur ou la hauteur) fera toujours redimensionner l'image pour l'adapter à ses proportions. – Marko
J'ai fait une comparaison jusqu'à à: http://jsfiddle.net/jF8y6/ avec 4 états différents. La principale différence est la façon dont il est utilisé via les feuilles de style externes en termes de possibilité de redimensionner les images pour différentes feuilles de style (bureau, mobile, impression, etc.) et la flexibilité qu'il apporte. Si vous codez les tailles, cela annule la flexibilité.
http://www.w3schools.com/tags/tag_IMG.asp
Comment pouvez-vous utiliser les dimensions relatives aux dimensions de l'image? Je suis confus – Marko
Ils ont le même effet.
<img width="100" height="100" /> a été utilisé depuis longtemps, même avec les propriétés Largeur/hauteur de dire .. un tableau HTML.
Il n'y a aucune différence si vous le spécifiez sur l'élément lui-même ou dans le CSS, même si je préfère maintenant utiliser CSS afin que je puisse garder le HTML clair et concis.
Voici un exemple http://jsfiddle.net/N2RgB/1/
J'ai chargé la même image 4 fois, à la fois en utilisant des attributs HTML proportionnels et non proportionnels ET propriétés CSS.
Il n'y a absolument aucune différence.
J'ai entendu que CSS est devenu standard, et donc les attributs pourraient être dépréciés parfois. –
heltonbiker
Et selon mes expériences, si les attributs contredisent le style, le style gagne. (Firefox, Chrome) – wberry
Eh bien, il y a absolument une différence. Les navigateurs téléchargent toujours le HTML d'abord, puis les feuilles de style, ce qui signifie que vous pouvez réserver une certaine largeur avec l'attribut puis appliquer le style correct plus tard, lorsque vous voulez poursuivre l'expérience utilisateur. – KinoP
La différence est dans l'approche sémantique et générale plutôt que dans la façon dont le rendu fonctionnera. :) Personnellement, je préfère concentrer toutes les choses comme la largeur et la hauteur dans les classes CSS et éviter d'utiliser des attributs comme "width" et des styles en ligne comme "style = 'width: 100px'", juste parce que cela crée une séparation logique. Le balisage indique ce qui doit être affiché et les règles CSS - à quoi cela ressemblera-t-il exactement?
Je peux voir une différence ... Vérifiez le code suivant extrait de code à volé: http://jqueryui.com/resources/demos/button/icons.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- redefine source of background-image -->
<style>
.ui-icon { width: 64px; height: 64px; }
</style>
<script type="text/javascript" >
$(function(){
$("img").button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
});
</script>
</head>
<body>
<img width="32px" height="32px"> <!-- size of img tag -->
</body>
</html>
Ceci est le résultat:
+1 pour mentionner le rendu –
Attention, le billet de blog lié date de 2005 et les standards CSS peuvent être différents maintenant. – wberry