Jump to content

Redimensionar Imagem consoante o tamalho do ecrã


Recommended Posts

Posted (edited)

Boas tardes,

Estou a criar uma página em HTML com CSS de entrada, o que pretendia era evitar que os elementos ficassem demasiado grandes em computadores com o ecrã mais pequenos, ou seja se usassem um ecrã mais pequeno para visualizar a página, as imagens ficavam mais pequenas, isso é possível?

O html é o seguinte:

(index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<script type="text/javascript" src="./vegas/jquery.vegas.js"> </script>
<link rel="stylesheet" type="text/css" href="./vegas/jquery.vegas.css" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<script>
$(function() {
$.vegas({
src:'./images/background.jpg'
});
$.vegas('overlay', {
src:'./vegas/overlays/13.png'
});
});
$.vegas('slideshow', {
backgrounds:[
{ src:'./images/background.jpg', fade:3000 },
{ src:'./images/bg1.jpg', fade:3000 },
{ src:'./images/bg2.jpg', fade:3000 },
{ src:'./images/bg3.jpg', fade:3000 }
]
})('overlay', {
src:'./vegas/overlays/13.png'
});
</script>
<title>PaginaTeste</title>
</head>
<body>
<a href="http://sas.portugalflash.com/"><img src="images/logo.png" id="imgpos" /></a>
<div id="footer"><img src="images/clique_entrar.png" height="40" /><img src="images/pf.png" width="200" align="right" /></div>
</body>
</html>

e o CSS (style.css)

@charset "UTF-8";
/* CSS Document */
#imgpos{
width:628px;
height:450px;
position:absolute;
top:50%;
left:50%;
margin-left:-314px;
margin-top:-225px; 
}
#footer {
width: 100%;
bottom: 0;
position: absolute;
}

Obrigado,

cumps

Edited by HilarYo
Posted

Boas,

Podes usar o "media".

http://css-tricks.com/css-media-queries/

Parece-me um pouco complexo, para o meu conhecimento de css 😄 , pouco ou nenhum 😄

Vou experimentar, obrigado

sim mas nunca atribuindo valores estáticos/definidos como tamanho das imagens como tens no teu HTML ... usa percentagens

Significa que se usar tamanhos deste género:

#imgpos{
width:100%;
height:100%;
position:absolute;
top:50%;
left:50%;
margin-left:-50%;
margin-top:-50%;
}
Posted

exacto, embora essa posição absoluta possa estragar o esquema...

e media querys nao é nada de complicado, acredita, quando ouvi falar tambem achei uma coisa de outro mundo, mas é tao simples xD

remomendo que leias este artigo, a mim foi o que me ajudou imenso Responsive Design in 3 Steps

(tel algures no fim um link para um outro artigo onde fala em maior detalhe das media querys 😉 )

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

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.