18015 sujets

Questions générales et questions de débutants

Equivalent attributs width et height de img en html 5

Bonjour,

J'utilise encore les attributs width et height pour la balise d'image (img) or il paraît que c'est obsolète. Chrome et Safari ne prennent même en compte ces attributs!

Or utiliser width et height dans le style (css) n'est pas du tout le même que ces attributs. Ces attributs étirent ou rétrécissent l'image selon la largeur et la hauteur indiquées tandis que les css width et height ne semblent être que des limites de taille.

Bref, je cherche l'équivalent??
Modérateur
raknal a écrit :


J'utilise encore les attributs width et height pour la balise d'image (img) or il paraît que c'est obsolète. Chrome et Safari ne prennent même en compte ces attributs!


Smiley nono faux !

Sinon, c'est quoi la question ?

Smiley switch
Bonjour raknal,

width et height dans le style (css) est tout à fait l'équivalent que les attributs width et height pour la balise d'image.

Dans les 2 cas tu dois préciser le width et le height (en px, en % ou auto).

Il n'y a pas de troisième solution.
Modifié par jeff-roland (07 Nov 2013 - 11:16)
raknal a écrit :
Bonjour,

J'utilise encore les attributs width et height pour la balise d'image (img) or il paraît que c'est obsolète.


Je veux bien la source, car non comme le dit niuxe ce n'est pas obsolète, tu as lu ça où ? Au contraire, la bonne pratique est de mettre une largeur width="" et hauteur height="" dans le HTML pour que le navigateur n'ai pas à la calculer tout seul (donc petit gain de perf). Ensuite ces valeurs peuvent être écrasées en CSS.

jeff-roland a écrit :
Dans les 2 cas tu dois préciser le width et le height (en px, en % ou auto).

Je préfère préciser ici que px, % et auto sont les unités utilisables dans le CSS. Dans le HTML, c'est sans sans unités qu'il faut l'écrire Smiley smile

Dernière précision : width:50% dans le CSS ne donnera PAS à ton image 50% de sa taille réelle, mais bien 50% de la taille de son parent Smiley smile
Stéphanie > Je parle de la comparaison entre <img width="200px" et height="150px" et <img style="width:200px;height:150px"

Ce n'est pas à 100% équivalent? La première permet de réserver un affichage de 200x150 et quelque soit la taille de l'image elle est étirée dans cette taille tandis que la seconde reserve l'affichage de 200x150 mais n'étire pas l'image!
salut,
c'est exactement pareil et je pense que +1 pour ce que dit Stéphanie W. Tout est dans son message.
En fait, je viens de constater que l'exigence dépend du doctype

J'ai le problème sous Chrome et Safari (Webkit) avec <!DOCTYPE html>
Mais sans souci avec <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Modérateur
@jb_gfx : +1

@raknal :
Les dimensions de l'image font 400x200. Or je l'étire sur la hauteur en CSS ou dans des attributs width et height. Tu peux changer le doctype. Tu obtiendras le même rendu sur tous les browser Smiley cligne 


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
	#imgEtire{width: 400px; height: 400px;}
    </style>
</head>
<body>
    <img src="http://lorempixel.com/400/200/sports/1/" width="400" height="400" alt="">
    <img id="imgEtire" src="http://lorempixel.com/400/200/sports/1/" alt="">
</body>
</html>

Modifié par niuxe (07 Nov 2013 - 16:16)
Sujet clos
Aller à