Aumentar imagens proporcionalmente

[Fabio Junio]

Salve novos amigos, preciso axar uma solução para um problema enfrentado aqui recentemente. Sou novo no fórum e também muito cru em js. Vou direto ao problema.

Preciso redimensionar algumas imagens. Entretanto, nunca saberei o verdadeiro tamanho das imagens(e acho que mesmo que soubesse, não faria diferença). É dificil até de explicar.(afff).

Possuo um <div> com width de 15000px e height de 80% da tela do usuário. Dentro dessa div, dinamicamente o sistema carrega varias imagens que ficam alocadas em outras divs. O que realmente acontece é quando as imagens são carregadas, elas estao ficando distorcidas por causa do height de 80%. O que eu queria era que quando a imagem esticasse na vertical, ela esticasse também na horizontal, enretanto na mesma proporção, pois assim perderia menos qualidade e não distorceria a imagem. A qualidade das imagens são todas HD. Vou postar alguns trechos do código.

Aqui é o trecho onde o sistema carrega as imagens

<div id="container">
    <?php
    foreach ($itens as $listar) {
        if ((substr($listar, -4) == ".jpg") || (substr($listar, -5) == ".jpeg") || (substr($listar, -4) == ".png")||(substr($listar, -4) == ".gif")) {
            // mostra diretamente a imagem
            echo "<div class=\"fotos\"><img src=\"" . $diretorio . $listar . "\" alt=\"" . $listar . "\"   /></div>";
        }
    }
    ?>

Aqui são as CSS

#container {
    position: relative;
    top: 110px;
    left: 165px;
    height: 80%;
    width: 15000px;
    float: left;
    display: block;
}
.fotos {
    position: inherit;
    height: 80%;
    margin-left: 10px;
    float: left;
    display: block;
}
.fotos img{
    float: left;
    height: 100%;
    width: 100%;
}

Agradeço a todos pela ajuda.