Redimensionando imagem CSS

[Everton Nobre 0]

Para eu redimensionar uma imagem dentro de uma div eu não teria que deixar um valor exato da div e entao depois redimensionar a imagem para dentro dessa div ?

 

ex:

#logo{

background-image:url(Logo.png);

width:221px; <<<Tamanho da Div

height:83px; <<<

background-size:100% 100%; <<<tamanho da imagem dentro da div

-webkit-background-size: 100% 100%;

-o-background-size: 100% 100%;

-khtml-background-size: 100% 100%;

-moz-background-size: 100% 100%;

 

tem alguns tutorial na net que faz direto e aqui eu não consigo

ex:

http://10calco.blogspot.com.br/2010/07/redimensionar-imagem-com-css-background.html

http://trabalharonline.com/redimensionar-e-nao-distorcer-imagens-com-css/

[mangakah 217]

Acho que a melhor opção para um logo é não redimensioná-lo usando HTML/CSS já que no seu caso o DIV é de tamanho fixo, não se trata, portanto, de responsive layout.

 

-

 

Tente usar:

 

background-repeat: no-repeat;
background-size: contain;
background-image: url(Logo.png);
width: 221px;
height: 83px;

 

Observe que o tamanho da imagem precisa ser proporcional ao tamanho do contêiner (DIV). Se não for, use 'corver' no lugar de 'contain' (mas uma parte da imagem será perdida).

 

Não se esqueça de acrescentar as propriedades com prefixos ou não funcionará nos navegadores mais antigos.

 

Ref:

http://www.css3.info/preview/background-size/

[Everton Nobre 0]

Eu coloquei a div com tamanho fixo porque não sei outra forma de fazer isso a não ser assim.

É porque a imagem que tenho é muito grande, então eu teria que redimensionar para ela ficar legal.(ou deveria diminuir a imagem no photoshop e coloca-la pura ?)

Quando a imagem é muito grande e tento redimensionar para um tamanho menor acaba distorcendo as letras.

E sobre o responsive layout, eu não consigo entendê-lo ainda mais com imagens.

[mangakah 217]

Eu coloquei a div com tamanho fixo porque não sei outra forma de fazer isso a não ser assim.

É porque a imagem que tenho é muito grande, então eu teria que redimensionar para ela ficar legal.(ou deveria diminuir a imagem no photoshop e coloca-la pura ?)

Quando a imagem é muito grande e tento redimensionar para um tamanho menor acaba distorcendo as letras.

E sobre o responsive layout, eu não consigo entendê-lo ainda mais com imagens.

 

 

Sim, eu acho que a melhor opção é usar a imagem "pura".

 

Qual o tamanho em Kilobytes dessa imagem? Geralmente imagens grandes também são muito pesadas, o que irá impactar negativamente no tempo de carregamento da página.

 

Você não tem esse logo em vetor? Quem criou esse logo deve tê-lo em vetor, então você poderá redimensioná-lo sem perdas e exportar para PNG ou JPEG.

 

Se for algo simples, tente usar um programa de conversão de bitmap para vetor. Eu recomendo o Vector Magic.

[André do Vale 76]

Com CSS, o correto é "background-size: cover".

 

Mas recomendo seriamente uma solução server-side. Tenha a dita cuja imagem no maior tamanho possível, e faça esse redimensionamento no servidor. Assim você gera "versões" da mesma, e deixa pronto. Assim, evita ficar carregando o mesma imagem para tamanhos menores. :thumbsup:

[mangakah 217]

Com CSS, o correto é "background-size: cover".

 

Putz... agora fui ver que eu escrevi "corver"... :sick:

 

Vou agora mesmo martelar meus dedos para eles aprenderem!

 

Mas recomendo seriamente uma solução server-side. Tenha a dita cuja imagem no maior tamanho possível, e faça esse redimensionamento no servidor. Assim você gera "versões" da mesma, e deixa pronto. Assim, evita ficar carregando o mesma imagem para tamanhos menores.

 

Mas no caso dele não é um responsive layout, é apenas um logo com tamanho fixo. Ele precisa é redimensionar essa imagem fisicamente, ao invés de usar propriedades CSS, mas precisa ser sem perdas, aí só tendo o desenho vetorial da arte original ou então refazer o logo.

[André do Vale 76]

Putz... agora fui ver que eu escrevi "corver"... :sick:

 

Vou agora mesmo martelar meus dedos para eles aprenderem!

 

 

 

Mas no caso dele não é um responsive layout, é apenas um logo com tamanho fixo. Ele precisa é redimensionar essa imagem fisicamente, ao invés de usar propriedades CSS, mas precisa ser sem perdas, aí só tendo o desenho vetorial da arte original ou então refazer o logo.

 

Por isso falei em usar a imagem no tamanho máximo que utilizará. Quando reduz uma img utilizando a biblioteca apropriada, não há perda de qualidade.