Problème avec images en affichage vertical

Bonjour je ne suis pas un champion.Je suis sur un PC portable, 15 pouces, affichage horizontal tout se passe bien par contre si je suis sur mon PC tour avec un affichage vertical mes images son étirées comme du chewing gum alors que le texte est bon. Quelqu'un pourait-il avoir la gentillesse de m"expqiert de qui se passe?NB : m^me en déduisant le pourcentage des images width et eight j'ai toujours les images déformées, je sais que normalement il faut donner les dimensiosn réelles en pixel. Merci beaucoup.
Css :
<style>
#article {
padding-bottom:15px;
}

.photo{
display:block;
float:left;
margin: 0px 5px 5px 0px;
}

.credits{
text-decoration:none;
display:block;
padding: 2px 0px 0px;
margin:0;
font-family:verdana,calibri, georgia,lato ultralight, Arial, Helvetica, sans-serif;
font-size:0.7em;
color:#666666;
clear:left;
text-align: center;
}

HTML


<H2>Bal bla bla</H2>
<div id="article">
<div class="photo">

<img src="image.jpg" alt="image" style="float:left; margin-right:5px;"
width="100%" height="100%"></>
<span class="credits">Légende</span>
</div>
<P class="normal"><span class="lettrine">M</span>Mon teste d'es longs paragraphes.</p>

Bonjour,

Je serais toi, pour ne pas avoir de problème, je créerai un container d'images faisant la hauteur/longueur max que tu attends. Puis a l'intérieur tu places ton image avec max-height et un max-width de la taille de ton container. Là tu n'auras plus d'image déformée.

Merci de la réponse, je vais chercher dans cette voie

Voilà j'ai trouvé, merci de votre aide!
<style type="text/css">
.floatleft
{
float: left;
margin: 10px 15px 5px 100px;
}
</style>

<img class="floatleft" src="image.jpg" width="600" height="300" alt="Mon image" />
<h3>Légende de l'image</h3>
<p class="normal">
Mon texte qui entoure l'image qui s'accorde bien sur avec les propriétés de paragraphe normal.
par exemple :
.normal {width:80%;
margin-left: 80px;
margin-right: 80px;
margin-top: 10px;
margin-bottom: 10px;
color:black;
font-style:normal;
border-style:solid;
border-width:1px;}
</p>