1

Estou montando um projeto para um amigo meu e estou utilizando o scrollfullpage que divide a página em partes. Na primeira parte estou colocando um banner e um escrito com o logo do meu amigo.

O problema é que quando coloco o logo normal, como 'img src="link"' no HTML, na hora da visualização percebo que ele sai de imagem e vai para o fundo em background-image. Apesar de eu colocar certo não está indo e ele fica com a imagem cortada.

HTML:

<img id="logo" src="assets/img/logo.png">

CSS:

#logo {
 width: 300;
 height: 180px;
}

Mas os tamanhos (width e height) que consigo mexer tanto no CSS quando no HTML são apenas o tamanho da area ou espaço que a imagem está (como se fosse uma div), não consigo mexer no tamanho da imagem em si. Quando diminuo o tamanho fica cortada a imagem.

Exemplo com o CSS acima, imagem aparece cortada:

Em vermelho, partes que estão faltando

Código e analise do Chrome em cima da página Código e Analise

Alguém já teve algum problema parecido ?

Link: https://carioca.creativecode.art.br/

5
  • Tem alguma coisa errada no código, não? O background-image está sendo usado na tag img? e no src tem uma gif de 1x1 Commented 6/12/2017 às 15:28
  • Ao menos eu não fiz nada que fizesse as imagens SRC virarem background image, já havia notado isso, mas não sei como consertar pois ficar em imagem não deixa eu configurar como eu quero Commented 6/12/2017 às 15:47
  • Seu CSS está escrito errado, está faltando o PX depois dos 300 deveria estar width:300px Vc está usando algum tipo de compilado?
    – hugocsl
    Commented 6/12/2017 às 16:17
  • Hugo, apesar de estar errado ali, o erro persiste, o problema principal é **img SRC vira background-image ** isso atrapalha em muito sobre o tratamento da imagem, quero poder voltar a trabalhar ela como imagem... Não sei o que é compilado kkk =P Commented 6/12/2017 às 16:23
  • muito se falando de ausência de 'px', isso não significa nada, pois o navegador por si só escolhe a forma, ele entende como 'auto', isso certamente está relacionado com uma biblioteca javascript ou com compressor de código, de certo modo faz sentido excluir a tag para otimizar, desde que o css também seja mirificado. Commented 23/07/2020 às 0:22

3 Respostas 3

3

isso por si só não é possível, a não ser que você esteja usando um código javascript para fazer esta conversão, certamente existe no seu site um código similar a este:

sobre data:url: https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

o que ocorre ai é que ele pega a imagem original e salva no seu navegador uma copia recodificada (base64), assim não precisa carregar a imagem sempre que o usuário acessar o site, é um bom método de otimização(consulte a documentação para entender melhor, o arquivo codificado pode ficar maior que o original se feito da forma errada), serve também para não pegarem a imagem do seu site e ficar usando em outro, consumindo a largura de banda do seu servidor, com ressalvas, claro, um usuário avançado conseguiria achar a imagem correspondente fuçado o console, mais já dificulta para a maioria, já que não poderá usar o data:url em outro lugar.

Formatação data:[<mediatype>][;base64],<data>

data:image é um caminho local e temporário, tanto é que você consegue acessar diretamente pelo navegador, sem uso de http(s), claro, vai dar uma pagina de erro, por que o caminho não é relativo.

"Nota: Os URLs de dados são tratados como origens opacas exclusivas pelos navegadores modernos, em vez de herdar a origem do objeto de configurações responsável pela navegação."

isso explica como ele foi parar em background-image, apenas retire este código ou "biblioteca" que você incluiu no site e limpe o cache, voltará ao normal em seguida.

em relação ao tamanho da imagem, você não consegue mudar o tamanho por uma questão de hierarquia, os valores de alguma forma já foram declarados no css(o certo é retirar de lá), você pode força ele renderizar com os valores que deseja usando: <img src="" style="width:300px !important;">

SEGUNDO A DOCUMENTAÇÃO DA MOZILA

data URIs:

os URIs definidos pela RFC 2397, permitem que os criadores de conteúdo incorporem pequenos arquivos embutidos nos documentos.

Os esquemas de codificação Base64 são comumente usados ​​quando há necessidade de codificar dados binários que precisam ser armazenados e transferidos por mídia projetada para lidar com dados de texto. Isso é para garantir que os dados permaneçam intactos sem modificação durante o transporte. O Base64 é comumente usado em vários aplicativos, incluindo email via MIME e armazenamento de dados complexos em XML .

No JavaScript, existem duas funções, respectivamente, para decodificar e codificar cadeias base64 :

  • atob()
  • btoa()

A atob() função decodifica uma sequência de dados que foi codificada usando a codificação base 64. Por outro lado, a btoa() função cria uma sequência ASCII codificada em base 64 a partir de uma "sequência" de dados binários.

0

Coloca em porcentagem para ver se funciona. Exemplo:

#logo {
 width: 60%;
 height: 50%;
}

Lembre-se de fazer os teste dos tamanhos aí, não necessariamente vai ser 100% ou 50%.

18
  • Nazaré, como eu citei, aí no CSS ele está alterando o tamanho da "div" que a imagem ocuparia, tipo, se eu colocar menor que a imagem, ele corta a imagem, se eu colocar maior, ele aumenta o espaço mas não a imagem e não tem nenhuma div nessa imagem Commented 6/12/2017 às 15:57
  • Já tentou colocar outra imagem pra testar? Faz um teste, tenta colocar outra imagem de fundo pra ver se o problema continua
    – Maria
    Commented 6/12/2017 às 16:05
  • Sim, tentei, mas a questão não é a imagem de fundo, a imagem que estou falando seria o logo que fica no meio da tela, mas ele não tá indo como img SRC como é normal, ele automaticamente vai para BACKGROUND-IMAGE, mesmo eu colocando img SRC e por causa disso não consigo mexer no tamanho dela, nem com width e height dentro do img, ele age como se fosse a div =( Commented 6/12/2017 às 16:18
  • Fiz as alterações por aqui e funcionou. Editei a resposta
    – Maria
    Commented 6/12/2017 às 16:29
  • A imagem permanece cortada, só que maior, ficou na mesma coisa Commented 6/12/2017 às 16:34
0

Olha primeiramente está faltando o 'px' na própriedade width do CSS. Porém como você explicou mesmo colocando o caminho da imagem no src "ele automaticamente vai para BACKGROUND-IMAGE", então tem duas possíveis soluções para isso:

1#

img#logo{
  height: auto;
  width: 100%;
  object-fit: cover;
}

2#

img#logo {
   background-size: cover
}

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .