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.