Posicionar imagem na base da Div

[Diego Fersan 0]

Camaradas, bom dia.

Estou com um problema para alinhar uma imagem que está dentro de uma div.

 

Como faço para alinhar a imagem na base de uma div sem ser por padding, já que não ficaria dinâmico, no caso da imagem aumentar ela iria descer e desalinhar. E também sem transformar a imagem em um background da Div, pois trata-se de um slider.

 

Na imagem em anexo ilustro melhor a minha necessidade.

 

Desde já agradeço.

[William Bruno 1501]

pela descrição, só consegui pensar em position absolute, com bottom: 0.

[Diego Fersan 0]

William, esqueci de especificar que estou usando o Cycle para fazer o slide.

Position Absolute funciona se o Cycle não estiver ativo, estando ativo ele simplesmente ignora e joga a div pra cima novamente.

[bhion 1]

Coloca o slider dentro de uma outra div, e posiciona ela como o william falou.

[William Bruno 1501]

sem problemas, desde q vc dê uma altura ao seu elemento e faça o pai da imagem ter um position relative.

[alexsouzaweb 2]

Olá Diego.

 

Você pode fazer de duas formas.

 

Se usar a imagem dentro da div como background, faça assim:

 

 

HTML: 



<div id="suaDiv"></div>



CSS:



#suaDiv{
    width: 200px;
    height: 200px;
    background: url(../img/suaImagem.jpg) no-repeat bottom;
}

 

 

-------------------------------------------------------------------------------

Se quiser usar a sua imagem diretamente na página html, faça assim:

 

 

HTML: 



<div id="suaDiv"><img src="img/suaImagem.jpg" /></div>



CSS: 



#suaDiv{
    width: 200px;
    height: 200px;
    vertical-align: bottom;
    display: table-cell;
}

 

 

Você deve usar display: table-cell pra converter a DIV para receber atributos de uma célular de table. Do contrario ele não alinha somente com o vertical-align.

 

Qualquer dúvida posta ae..

 

Abs,

[Diego Fersan 0]

Galerinha,
Coloquei o Slider dentro de uma div para posiciona-la e não deu. As imagens continuavam alinhadas ao topo.
William, coloquei altura e atribui posicionamento relativo ao pai e nada.
Alex, nada velho. Não deu também.

 

Se alguém puder quebrar o grande galho e puder acessar www.clubeboboi.com.br/site e dar uma olhada no código, agradecerei muito.

Estou usando Boilerplate e sistema de grids, além do cycle para as transições.

 

Mais uma vez, obrigado.

[William Bruno 1501]

cara, vi aqui e oq está atrapalhando é que o teu cycle está colocando top: 0; e isso conflita com o bottom: 0;

 

coloca as tuas imagens dentro de uma outra DIV.

ai essa div terá relative e altura, enqnto as imagens terão absolute e bottom: 0;

[Diego Fersan 0]

Brunão, fazendo isso enfrento um problema. Preciso setar a div que ficará encarregada de fazer a transição, e caso o cycle encontre outra div dentro, ele não funciona. Fiz um teste criando uma DIV especifica para setar a animação, uma div para o relative e apliquei bottom nas imagens, não funcionou. Adicionei !Important também e nada. Tentei aplicando table cell e vertical align e nada, é ignorado e as imagens continuam alinhas ao pelo topo e esquerda.

 

Tenso.

[William Bruno 1501]

não cara, vc ta complicando..

 

qndo vc faz o cycle, bastaria dizer para ele considerar apenas a primeira div:

$('#id > div').cycle();

[Diego Fersan 0]

Vamos lá.

Fiz o teste com o Cycle desativado e posicionei as imagens na base como no código abaixo.

Porém, ao ativar o Cycle, as imagens voltam para o topo.

É o marvado que muda. Mas como impedir que ele faça isso?

<div class="relativo">
<img src="img/agenda/banner1.jpg" alt="">
</div>

.relativo {
    position: relative;
    height: 400px;
    background: #abeafe;
}
 
.relativo > img {
    margin-left: 10px;
    position: absolute;
    bottom: -1px !important;
}