Jump to content
Oreo

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

Recommended Posts

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 by Oreo

Share this post


Link to post
Share on other 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%;.

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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({      
   });

Edited by Oreo

Share this post


Link to post
Share on other 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 });
});

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.