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

[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.

Edited September 11, 2013 at 06:03 PM by Oreo

[yoda]

O que procuras chama-se responsive images.

Em alternativa (só para os poucos browsers suportados), podes usar a função calc() do CSS.

Edited September 11, 2013 at 06:16 PM by yoda

[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%;.

[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
};

[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({      
   });

Edited September 11, 2013 at 10:48 PM by Oreo

[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 });
});