Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Redimensionamento de imagem

Olá, boa noite!

De acordo com as explicações dadas nesta aula, estou tentando redimensionar o tamanho de uma imagem entretanto não está dando certo... Poderiam me ajudar por favor?

Segue abaixo meu código html:

<img class="logo-site" src="img/logo.png" alt="logo do site da Bruna">

E agora código css:

.logo-site {    
    background-image: url(img/logo-mini.png);
}

@media (min-width: 600px) {
    .logo-site {       
            background-image: url(img/logo.png);   
    }
}

Já verifiquei e as imagens encontram-se na pasta img.

Desde já agradeço e fico no aguardo =)

Bruna

4 respostas

Oi Bruna, belezinha?

Você está usando media queries, elas servem para você mudar o estilo da sua página, de acordo com o tamanho da tela.

Repara aqui: @media (min-width: 600px).

Você está buscando por uma media, com uma largura de 600px pra cima.

Tenta pegar seu browser e diminuir a janela pra vc ver.

Se precisar, fiz esse Jsbin aqui, só redimensione a telinha de resultado que vai mostrar bordas diferentes de acordo com a largura da tela.

Espero ter ajudado,

Abcs! \o

Olá Natan, tudo bem e você?

Obrigada pela resposta.

Na realidade minhas imagens possuem tamanhos diferentes, a primeira possui 60x60 px e a imagem pequena possui 28x28 px.

Meu código está exatamente igual ao seu, entretanto ao diminuir meu browser a imagem não é alterada....

Ah, coloquei a borda colorida e ela sim, muda de cor. =/

Minha intenção aqui é mudar a imagem... isso é possível, correto? Reparei que o exemplo que você me enviou o tamanho da imagem não altera...

Obrigada novamente e fico no aguardo!

Bruna

solução!

Oi Bruna, tudo bem tambem!

Refiz o exemplo mudando a imagem, dá uma olhada aqui.

Se a borda está mudando no seu código, o media query está ok, problema provavelmente é nas imagens.

Confere se as imagens sao diferentes (uma azul outra roxa, por exemplo), e certifique-se que nao tem alguma declaracao colocando largura/altura nela.

Abcs!

Boa tarde Natan! Obrigada, deu certo.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software