imagem com width:100% fica gigante

[stromdh 15]

Buenas galera, estou fazendo um site em um cms (dotNetNuke) integrado com o bootstrap e estou tendo uma dificuldade. É o seguinte:

 

Criei um cabeçalho que tem uma header que contém apenas o objeto nav.

Logo após criei uma section que contém uma imagem abaixo da imagem um carousel, sendo que esta imagem deve ficar sobreposta ao carousel.

 

Setei position:absolute para o header que contém o objeto nav, de maneira que este fique sobreposto a imagem e ao carousel, então meu código com o css ficou da seguinte forma(vou expressar de forma resumida):

<header>
    <nav>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- módulo de meno do DNN -->
                </div>
            </div>
        </div>
    </nav>
</header>

<section class="slider">
    <div class="foto">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- módulo de edicao do DNN -->
                    <div id="fotoPane" runat="server"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- módulo de edicao do DNN -->
    <div id="sliderPane" runat="server"></div>
</section> 

O CSS deste arquivo ficou assim:

header {
    position: absolute;
    width: 100%;
}

.foto {
    position: relative;
    z-index: 2;
}

.slider {

1. overflow: hidden;

}

div#dnn_sliderPane { z-index: 1; } img{ width:100%; height:auto; }

 

O problema é que a imagem que é carregada dentro do módulo do DNN e deve ficar sobreposta ao carousel, quando declarado width:100% fica gigante, completamente desproporcional.

Consegui controlar o tamanho dela para que não aumentasse grotescamente com um max-width:100%; mas outro problema é que quando a tela sofre modificações no tamanho, a imagem não modifica o seu tamanho, permanecendo com um tamanho como se tivesse largura fixa.

 

Alguém poderia me auxiliar neste problema? se for preciso eu posto o link do site. valeu galera.

 

[GustavoDose 1]

Coloca tamanho da div em porcentagem tambem.

 

div#dnn_sliderPane {

width:40%; /* o tamanho que você quiser */

z-index: 1;

}

div#dnn_sliderPane img{

width:100%;

height:auto;

}

[stromdh 15]

infelizmente não rolou brother. abaixo postei o link pra vc dar um conferes:

http://vereadoradenise.com.br/

[stromdh 15]

saquei o que estava acontecendo. Ao colocar width:100% na imagem ela fica com a mesma largura do elemento pai. neste caso eu declarei uma largura de 20%¨para a imagem e depois eu fui arrumando os estragos conforme a resolução com media querie.

 

Valeu ae GustavoDose pela atenção.