imagem com width:100% fica gigante

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 {

-

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.