Estou tentando solucionar essa questão pois tenho um slide em .ppt com dimensões de 720w e 540h e minha página é liquida, por isso o motivo de aumentar ou diminuir proporcionalmente.
Exemplo:
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeA forma mais simples de se criar esse efeito é adicionando o estilo padding-bottom
com o percentual equivalente da altura dividido pela largura pretendida.
div#slide {
padding-bottom: 75%; /* 540/720 */
}
Assim, mesmo após redimencionar a janela, o tamanho da div será sempre proporcional a 720:540.
Exemplo: JSFiddle.
Com um pouquinho de Javascript você pode garantir que o elemento tem a proporção 4:3 fixando uma das dimensões (isto é, ou a largura ou a altura).
Fiz um exemplo (que pode ser testado nesse JSFiddle - basta arrastar a borda do painel Result para ajustar as dimensões da exibição) em que a largura do div
é ajustada à área de exibição da janela do navegador e a altura é calculada com base nessa nova largura e na proporção desejada (3/4 = 0,75
).
O div
(que representa o elemento em que você exibe o seu PPT):
<div id="teste">
Olá mundo!
</div>
Tem o estilo definido assim (inclui o estilo da "página" de exemplo):
body {
margin: 5px;
background-color: black;
overflow: hidden;
}
#teste {
background-color: red;
display:inline-block;
width: 720px;
height: 540px;
color: white;
text-align: center;
line-height: 540px;
}
E o código Javascript
que ajusta a proporção é esse:
var adjustSize = function() {
var oDiv = document.getElementById("teste");
var iWidth = window.innerWidth - 10; // Desconta duas vezes o tamanho da borda
var iHeight = iWidth * 0.75; // Mantém o aspecto 4:3 para a largura (width) fixa
oDiv.style.width = iWidth.toString() + "px";
oDiv.style.height = iHeight.toString() + "px";
oDiv.style.lineHeight = oDiv.style.height;
}
window.onresize = adjustSize;
adjustSize();
Você pode determinar as dimensões em porcentagem, sendo assim fica adaptável ao redimensionamento do navegador:
div { width: 80%; height: 80%; border: 1px solid black; }
Você pode utilizar um Framework CSS para este fim, como por exemplo o Twitter Bootstrap
, cujos exemplos você pode encontrar neste link:
http://getbootstrap.com/css/#grid-example-fluid
Por exemplo:
(...)
<--! inclui o css do twitter-bootstrap, você também pode baixar ele e instalar direto no seu site -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
(...)
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!-- conteúdo aqui -->
</div>
</div>
</div>
Se o seu slide é uma imagem você pode colocar o img
com width: 100%
e height: auto
, ficaria assim:
img { width: 100%; height: auto; }
Mas se não for uma imagem, se for, por exemplo, uma div
que contem uma chamada para um flash
, você terá que fazer em js
.
Em jQuery ficaria assim:
Primeiro o css
.
div { width: 100%; }
Depois o js
, de acordo a proporção indicada, a altura vai ser sempre 75% da largura.
$(function(){
var largura = $('div').width();
var altura = ( 75 * largura ) / 100;
$('div').css('height', Math.round(altura) + 'px');
});
Caso você queira que quando a janela mude de tamanho, a div
acompanhe, adicione o código abaixo ao js
$( window ).resize(function() {
var largura = $('div').width();
var altura = ( 75 * largura ) / 100;
$('div').css('height', Math.round(altura) + 'px');
});
Exemplo no jsfiddle, se você redimencionar a janela, verá que aparece a div
vermelha por trás da preta.