Ajuste de background-image

[rikaschmitt 54]

Bom dia galera.

 

Estou com um problema, que ao meu ver é natural, mas que estão implicando comigo.

É o seguinte: tenho uma div com conteúdo, e essa div é responsiva, ou seja, o tamanho dela vai variar de acordo com a resolução e a quantidade de conteúdo dentro dela. O fundo da div é uma imagem... só que, de acordo com a resolução, a imagem fica com partes cortadas.. pois estou utilizando "background-size:cover;".

 

Exemplo:

 

No caso (1), se eu ajustar a imagem de acordo com a dimensão da div, a imagem ficará feia, sofrera achatamento. Não dá!

Outro caso é deixar a imagem e a div num tamanho fixo (2), mas dai não fica responsivo e o conteúdo ficará estranho.

E por final (3), é o que estou usando. Com a propriedade background-size:cover, a imagem preenche toda a div.. o único problema é que algumas partes dela são cortadas.

 

Alguém tem uma outra alternativa pra isso?

[wilnet 92]

Olá rikaschmitt, blza!

 

Usando desta forma não te ajuda?

*{ margin: 0; padding: 0; }
	
html { 
  background: url(SuaImagem.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Espero ter ajudado.

 

vlw

[rikaschmitt 54]

Não ajuda, porque mesmo assim a imagem sofre algum corte dependendo da resolução\tamanho da div.

:(

[Electronic 124]

Usa

 background-size: 100% 100%;

[rikaschmitt 54]

Também não. A imagem não fica certo.

O jeito é usar "cover" mesmo.. e tipo, não faz milagre.

 

Se a div tem 500 de largura e 300 de altura, e a imagem tem 400 de largura e 50 de altura.. ela não vai ficar decente na div.. :P

[angelorubin 142]

Veja se ajuda - http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

[rikaschmitt 54]

Poisé. no mais dá o mesmo efeito dos demais... ele apenas redimensiona a imagem, ajustando para que fique proporcional.. mesmo assim algumas partes são cortadas.

 

Valeu galera, mas acho que não tem como. É assim ou não. rsrs

[angelorubin 142]

Realmente uma solução definitiva ainda não existe, apenas estas soluções paliativas.

Ultimamente andei lendo sobre o assunto e estão em pauta enúmeras soluções:

• picture element,
• srcset,
• adaptive images,
• art direction,
• picturefill,
• HiSRC

Contudo o grande problema é que elas precisam atender a muitas exigências para se consolidar e cada uma tem suas vantagens e desvantagens.

 

Pelo que vejo isso ainda vai gerar muita discussão antes de um consenso, e como se diz - "é o que temos para o momento".

[angelorubin 142]

Apenas uma correção, eu escrevi enúmeras (sim, assassinei o português ... rsrs), quando na verdade a palavra correta é inúmeras.

[Electronic 124]

Também não. A imagem não fica certo.

O jeito é usar "cover" mesmo.. e tipo, não faz milagre.

 

Se a div tem 500 de largura e 300 de altura, e a imagem tem 400 de largura e 50 de altura.. ela não vai ficar decente na div.. :P

 

Desculpa, é escrevi a regra errada. é background-size mesmo com valor 100% 100% e nao position.

assim ela se ajusta a div sem cortar

 

veja o exemplo no link

mude o tamanho da div pra ver como vai alterando

 

http://jsfiddle.net/p21qf8gj/4/

 

 

[rikaschmitt 54]

 

Desculpa, é escrevi a regra errada. é background-size mesmo com valor 100% 100% e nao position.

assim ela se ajusta a div sem cortar

 

veja o exemplo no link

mude o tamanho da div pra ver como vai alterando

 

http://jsfiddle.net/p21qf8gj/4/

 

 

 

Sim, se ajusta sem cortar, mas se a div tiver um tamanho desproporcional a imagem, ela ficará achatada, ou espichada, ou estranha...