Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Daniel Lisboa

Imagem Expansible

Por , em Desenvolvimento frontend

Recommended Posts

Daniel Lisboa    0

Daniel Lisboa
Postado

Bom dia galera...como eu faço pra colocar uma imagem no meu site por exemplo um banner, um rodapé desenhado que se ajuste da margem 0 da esquerda até o final do lado direito da tela, e que quando eu minimizar essa tela essa imagem se ajuste com a tela.seria chamado de expansible, mas nunca fiz quem puder dar uma ajuda ai eu agradeço...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Lisboa    0

Daniel Lisboa
Postado 

#box1	{	color:FFFFFF;/* BANNER PRINCIAPL*/		background: url(prewiew/images/testera.jpg) no-repeat;	margin-left:0px;	margin-right:1000px;	margin-top: 0px;	position: absolute;	top: 0px;	left:0px;	height: 131px;	width: 1280px;	overflow: hidden		}

essa aki é minha box que eu quero expandir

Compartilhar este post

Link para o post
Compartilhar em outros sites

alemex    0

alemex
Postado

cara,

 

não sei se entendi muito bem...

mas tenta isso aqui:

 

*{  margin:0;padding:0;}#box1{  color:#fff;  background: url(prewiew/images/testera.jpg) no-repeat top left;  position: absolute;  top: 0px;  left:0px;  height: 131px;  width: 100%;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Lisboa    0

Daniel Lisboa
Postado

cara valeu pela dica mas não expandiu na telavou ser um pouco mais claro acho que deixei duvidasexemplo: em tenho uma imagem no meu top eu e essa imagem eu quero que ela se enquadre de ponta a ponta na tela.se eu restaurar a janela quero que ela se ajuste automaticamente, ja tentei e não consigo fazer isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

alemex    0

alemex
Postado

então crie um arquivo .txt qualquer no seu computador e cole isso aqui dentro dele:

 

<html>  <head>	<title>Página Teste</title>	<style>	  * { margin:0; padding:0; }	  div#banner {		color:#fff;		background:white;		height: 273px;		width: 100%;	  }	  div#content {		min-height:100px;		width:100%;	  }	  div#footer {		width:100%;		height:20px;		background:silver;	  }	</style>  </head>  <body>	<div id="banner">	  <img src="http://www.cinema.ufscar.br/sorocaba/banner.jpg" width="100%" height="100%"></img>	</div>	<div id="content">	  Lorem Ipsum is simply dummy text of the printing and typesetting industry.	  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 	  an unknown printer took a galley of type and scrambled it to make a type specimen book. 	  It has survived not only five centuries, but also the leap into electronic typesetting, 	  remaining essentially unchanged. It was popularised in the 1960s with the release of 	  Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 	  publishing software like Aldus PageMaker including versions of Lorem Ipsum.	</div>	<div id="footer">	  Rodapé - Copyrights e tudo mais...	</div>  </body></html>

depois você pega o arquivo e renomeia pra .html e abre o arquivo... dai veja se é isso que você quer e responde ai ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Esperem ai

 

 

<img src="http://www.cinema.ufscar.br/sorocaba/banner.jpg" width="100%" height="100%"></img>

 

Que é isso?? Desde quando img tem tag de fechamento?

img é tag de mão única

 

 

no HTML<img src="http://www.cinema.ufscar.br/sorocaba/banner.jpg" width="100%" height="100%" >no xHTML<img src="http://www.cinema.ufscar.br/sorocaba/banner.jpg" width="100%" height="100%" />

quanto as dimensões você pode:

 

1. criar uma classe:

 

.testeira { width: 100%;}

 

2. definir pela tag e id do container:

 

#testeira img{ width: 100%;}/* toda img dentro de #testeira terá 100% de largura */

Espero ter sido claro

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Oo, acho que não precisa especificar width com 100%. Se não me engano o padrão já é ocupar toda a largura disponível...Aliás, a dúvida dele envolve programação eu acho viu... porque o que ele quer, é um fundo, de tamanho 800 de largura por exemplo... mas numa janela com 400px de largura, esta imagem diminua... sacou?Infelizmente não posso ajudar pq nunca fiz algo do tipo, só tentei esclarecer um pouco.[]s

Compartilhar este post

Link para o post
Compartilhar em outros sites

alemex    0

alemex
Postado

Esperem ai

<img src="http://www.cinema.ufscar.br/sorocaba/banner.jpg" width="100%" height="100%"></img>
Que é isso?? Desde quando img tem tag de fechamento?img é tag de mão única
IUASHauishAUSHasuAHSU....pardón Hunter... pelo erro da img... mas eh q eu fiz o exemplo no bloco de notas... dai fui escrevendo html (quase tudo é abrindo e fechando...) dai o img foi no embalo.... isuhAUISHaisuAHSUIa...mas mesmo tendo tag de abrir e fechar dá certo... ^_^

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Bom, só vou deixar minha opinião aqui: renderização de imagens pelo browser não fica legal galera... Digo, controlar o tamanho da imagem via HTML ou JS, seja lá qual for o recurso, não fica bom!Há um tempo atrás eu deixei em um post meu ponto de vista sobre isso também, mas é que agora eu tava na correria e não ía dar para procurar nos meus posts, mas assim que eu tiver tempo, procuro e indico a você(s) o link...Vale a pena conferir, é que é meio extenso e como falei, estava na correria e não tava com "cabeça" para tentar encontrar as palavras novamente...Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Concordo Mr. Moderador, controlar imagens via CSS ou JS não é legal, mas há projetos que é necessário, se for trabalhar com layout liquido ter imagens de tamanhos fixos detona teu layout!

Há um tempo atrás eu deixei em um post meu ponto de vista sobre isso também, mas é que agora eu tava na correria e não ía dar para procurar nos meus posts, mas assim que eu tiver tempo, procuro e indico a você(s) o link...

Que mal exemplo para um moderador não usar a busca rsrsrsrs, brincadeira mano!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Mas Hunter_, o que eu não gosto em situações como esta é justamente o resultado final no browser! A renderização como já citei não é boa quando feita diretamente pelo browser...

 

Veja o tópico que citei anteriormente:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Diminuir foto sem distorcer

Eu só gostaria de um exemplo de algum projeto que foi necessário utilizar imagens redimenionáveis com o browser... Teria algum Hunter_?

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Tem sim, mas eh de sistema, sites como você falou n fica legal!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Tem sim, mas eh de sistema, sites como você falou n fica legal!

Bom, então acredito que para o Daniel Lisboa não seja muito legal isso, pois ele pretende fazer uso de redimensionamento de imagens em um site, como ele mesmo colocou no início... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

O que é bom para mim, não é necessariamente bom para ti e vice-versa. Estou apenas ajudando a moçada, nada +, me desculpe qq coisa

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Não precisa de desculpar, Hunter_, afinal de contas, é bom conhecer outros pontos de vista... Eu mesmo nunca me deparei com algum sistema que necessitasse de auto-redimensionamento de imagens, por isso "defendi minha tese" de que redimensionar imagens via browser não é legal... Para isso eu tenho argumentos visuais, posso mostrar como é que fica quando isso acontece via browser... Mas se o próprio Daniel Lisboa achar interessante utilizar as soluções propostas por você no site dele, por que não? Né? Afinal de contas, temos o livre arbítrio! rsrsrs...

 

A única coisa que eu pediria é que se você, Daniel Lisboa, conseguir encontrar uma solução, por favor, nos avise o que foi feito, pois dessa forma podemos utilizar sua dúvida respondida em alguma outra situação similar que venha aperecer futuramente... Pode ser?

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito