Ir para o conteúdo
Oreo

Resize DIV - style="width: (x)px; height: (y)px;"

Mensagens Recomendadas

Oreo

Viva! Não sabia mesmo onde colocar este tópico.

Estou a ter uma dificuldade numa realização de um site pessoal. O inicio, do site, é constituído com umas divs com umas imagens no interior. A minha dúvida e problema começa quando quero por essa div, com a imagem no seu interior a fazer um resize ao window do visualizador. Então é o seguinte: tenho uma div e sempre que a window do visualizador mudar, o style width e height mudam automaticamente, escrevendo-os mesmo sempre que for para visualizar o código. Porém, o height é automático, e o width adapta-se ao height. Para esclarecer melhor a dúvida fica o link do site em experiência

http://exemplolima.netai.net/

Nesse link, tenho escrito na alinha:

<div id="showcase"><div class="item" style="width: 646px; height: 622px;">

Esses 646px e 622px foram escritos por mim, porém, queria isso calculasse de forma automática, fazendo um "print" no código.

Não sei mesmo como resolver este problema. Não sei se será um código em java ou em php.

Editado por Oreo

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Oreo

Eu queria algo que fizesse o seguinte calculo:

<div class="item" data-template="single" style="width: (x)px; height: 100%;"> 
<div class="assets"><a href="#">
<img class="asset" img="" src="image/_MG_7127b.jpg"> 
<noscript></noscript>
</a><div class="text"><a href="#">
</a><h1><a href="#"><span></span></a><a href="#">A Queda do Império</a></h1>
<h2>2013.02.20</h2><h5><span><a href="#">View Post</a></span></h5>
</div>
</div>
</div>

O calculo era o (x)+60px. Este (x), é a dimensão da imagem, ou seja do img src. Imagina-se que o img src está com 360px x 236px. Então, fazia um calculo de 360+60 que dava 420, e "imprimia-o" no div class="item" como width: 420px; height: 100%;.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

estás a falar de ?

window.onresize = function() {
 // calculate the size of the screen
 // calculate the final size of the div/img
 // resize/update the div/img element
};


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
Oreo

Uma ajuda? Tenho o seguinte:

<div class="item" data-template="single" style="width: auto; height: 100%;">
<div class="assets"><a href="#">
<img class="asset" src="image/_MG_7127b.jpg">

Talvez o javascript consiga resolver o meu problema.

Então é o seguinte. Algo como, o '.item' é a div que será ajustável. Porém existe a div '.assets' dentro, e que dentro dela tem a class '.asset'. Ou seja, o .asset é onde está a imagem.

Alguma sugestão de código?

Acho que começa como:

$(window).resize(function() {
   $( ".item" ).resize({      
   });

Editado por Oreo

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
RayBacK

Para fazer resize a qualquer elemento html com jQuery usa .css() e não .resize() que é o evento para quando o elemento esta a ser redimensionado.

$(window).resize(function() {
var width = 0, height = 0; // Aqui calculas qual o tamanho da imagem relacionada com a janela.
$( ".item" ).css({"width": width, "height": height });
});

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.