[Résolu] Proble dimension image

bonjour a tous,

les dimensions des images qui se trouve dans la balise <img> ne sont pas prise en compte, pourquoi?

<figure>
		<a href="#"><img width="220" height="120" alt="logo-overlord" src="img/saut.jpg"></a>
		</figure>

merci pour votre réponse

Bonjour,

A part un redimmensionnement CSS (de "figure" ou "a" ou "img") et une possible erreur de balise IMG non fermée, je ne vois pas.

<img width="220" height="120" alt="logo-overlord" src="img/saut.jpg" />

Modifié par Super_baloo8 (06 Jan 2016 - 14:25)

Oui je penses cela aussi, juste pour enfoncer le clou, je préciserais px

<img width="220px" height="120px" alt="logo-overlord" src="img/saut.jpg" />

merci pour vos réponse, mais toujours rien avec fermeture de balise ou px, alors la franchement c'est la première fois que cela me le fait...

en tout cas le problème vient pas de ce que tu nous fournis,

parce que avec uniquement ce que tu fournis en code, les attributs de la balise img sont pris en compte

tu dois avoir tu css autre part qui bloque.
Modifié par JENCAL (06 Jan 2016 - 15:46)

mon code css:

/*****************************reset*******************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/****************** HTML5 display-role reset for older browsers *************************/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/****************************style********************************/
html body{
	font-family: 'Philosopher', sans-serif;
	margin: 0;
	padding: 0;
	border: 0;
	color:#8b6c42;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	background:#e1ce9a;
}
#wrapper{
	
	width:960px;
	min-height:980px;
	margin:0 auto;
	border:1px solid #8b6c42;
	background:-moz-linear-gradient(#e1ce9a, #8b6c42);
	background:-webkit-linear-gradient(#e1ce9a, #8b6c42);
	background:-o-linear-gradient(#e1ce9a, #8b6c42);
	background:linear-gradient(#e1ce9a, #8b6c42);
	}
#content{
	
	width:940px;
	min-height:980px;
	margin:0 10px;
	border:1px solid #8b6c42;
	
	}
h1, h2, h3{
	color: #904818;

	}

/**********************************header****************************/
header{
	
	height:300px;
	margin-top:0;
	margin-left:0;
	/*border:1px solid #8b6c42;*/
}
header #logo figure img{
	
	float:left;
	margin-top:60px;
	margin-left:30px;
}
header ul.horizontal-r{
	
	height:60px;
	clear:both;
	padding:0;
	margin-top:240px;
	/*border:1px solid #8b6c42;*/
}
header ul.horizontal-r li{
	
	float:right;
	list-style:outside none none;
	margin-right:20px;
	
	
}
header ul.horizontal-r li a{
	
	text-decoration:none;
	text-align:center;
	color:#8b6c42;
	font-size:14px;
	font-weight:300;
	display:block;
	padding:10px;
	margin-top:35px;
	
}
header ul.horizontal-r li a:hover{
	
	color:#fff;
	-webkit-transition-duration: 3s;
	-moz-transition-duration: 3s;
	-o-transition-duration: 3s;
    transition-duration: 3s;
}
/************************************content-article-1**************************/
section{
	
	width:940px;
	min-height:340px;
	margin:0 auto;
	padding-bottom:40px;

	}
article.info{
	
	width:220px;
	min-height:340px;
	float:left;
	
	}
.clear{clear:both;}
article.p-news{padding-right:20px;}

article.info figure img{
	float:left;
	border:none;
	vertical-align:middle;
	
	}
article.info h1{
	clear:both;
	padding:10px 0;
	
	}
article.info p{
	
	text-align:left;
	color:#e1ce9a;
	
}
article.info p a{
	
	text-decoration:none;
	color:#e1ce9a;
	
}
article.info p a:hover{
	
	color:#fff;
	
}
/************************************content-article-2**************************/


#art-2.info-l{
	width:700px;
	min-height:400px;
	float:left;
	}
#art-2 h2{
	
	padding:3px 0;
}
#art-2 figure img{
	
	padding:10px 20px 0 0;
	float:left;

	}

#art-2 p{
	
	text-align:justify;
	color:#e1ce9a;
	
}
#art-2 p a{
	
	color:#e1ce9a;
	
	}
#art-2 p a:hover{
	
	color:#fff;
	
	}
#art-2.info-r{
	
	width:220px;
	min-height:400px;
	margin-left:20px;
	float:left;
	
}
#art-2 p{
	
	text-align:left;
	margin-bottom:10px;
	color:#e1ce9a;
	
}
#art-2 .separation{
	border-top:1px dotted #904818;
	border-bottom:1px dotted #904818;
	padding:2px 0;
 }
 /************************************content-article-2-2**************************/
 article.art-2-2{
	 width:460px;
	 height:235px;
	 float:left;
	border:1px solid #000;
}
article.art-p-r{
	
	margin:0 15px 0 0;
	
}

je n'arrive pas à recréé ton problème

Christele a écrit :
Oui je penses cela aussi, juste pour enfoncer le clou, je préciserais px

<img width="220px" height="120px" alt="logo-overlord" src="img/saut.jpg" />

Attention, il ne fait pas préciser d'unités dans les attributs width et height. Elles se font pas défaut en pixels.

Le problème vient sûrement du CSS ou d'un code JS quelque part ailleurs.
Dans ton css tu spécifies un padding pour les images donc est-ce que ce n'est pas ça qui fausse tes calculs ?

j'ai retiré le padding aux images et oui j'ai du js pour un slider

mais toujours rien au niveau des dimensions image

Sur quel navigateur (et version) as-tu ce probléme, car moi ça marche sur trois navigateurs différents

merci a tous