Problema con galería de imágenes.

[XRNET]

Saludos Forosdelweb

Ando nuevo con programación web y no se mucho, solo domino css y html, y ando luchando con javascript, ando haciendo una web y no se como organizar la galería.

He aquí mi problema, les planteo el siguiente código.

ul {
list-style:none;
margin:0;
padding:0;
width:600px;
}
li {
float:left;
margin: 5px;
padding:0;
}
li a img {
border: none;
}
li img {
display: block;
float: left;
width: 150px;
}
li span {
display:block;
text-align:center;
clear:both;
}

Mi pregunta es, si coloco las imágenes en listas... ¿como hago para que no se vean distorsionadas? es decir...
Si coloco una imagen de alto 500 y de ancho 100, se ve como que si fuera de ancho 100 y de alto 100.

Podría corregir este error con css? o necesito algo mas?... que tengo que añadir?

Gracias de antemano.