📣 Seu anúncio aqui? Anuncie no ForoBeta

Como centralizar imagem grande no cabeçalho sem carregar excessivamente

  • Autor Autor RedxLus
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
RedxLus

RedxLus

Dseda
SEO
Verificación en dos pasos activada
El problema es que tengo que usar una imagen muy grande para que no quede mal y claro eso se nota en el peso, les dejo una captura para que lo vean:
Trate de editar el archivo style.css de la plantilla pero no conseguí que cambiara nada.
La diferencia de peso entre una y otra es abismal y retrasa la carga de mi web muchísimo

Sin título_opt (3).webp
 
Última edição:
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Continuar com o Google Criar conta com e-mail
Leva 30 segundos · você volta a este tópico ao terminar
madre mia, una imagen de 3508 X 2580 ufffff

para empezar edita esa imagen por ejemplo en photoshop. Guardala del doble de tamaño al que deseas que se muestre con resolucion de 150 y cuando la vas a guardar le dices al 50%, ahi tendras buena resolucion y un peso minimo.

Despues en el css, debes realizar los cambios en la #logo por lo que he visto, lo tienes en float: left y debes decirle que se centre ademas de width y heigt del 100%.

Es jugar un poco y puedes ir reduciendo el tamaño a tu gusto con el porcentaje.
 
A ver sí te funciona con :

display: flex;
justify-content:center;
 
asesor disse:
madre mia, una imagen de 3508 X 2580 ufffff

para empezar edita esa imagen por ejemplo en photoshop. Guardala del doble de tamaño al que deseas que se muestre con resolucion de 150 y cuando la vas a guardar le dices al 50%, ahi tendras buena resolucion y un peso minimo.

Despues en el css, debes realizar los cambios en la #logo por lo que he visto, lo tienes en float: left y debes decirle que se centre ademas de width y heigt del 100%.

Es jugar un poco y puedes ir reduciendo el tamaño a tu gusto con el porcentaje.
Clique para expandir...

JAJAJA la imagen pesa tanto por que la hice yo en Ps, voy a probar y ya si encuentro algún problema lo cuento.
 
krusty72 disse:
A ver sí te funciona con :

display: flex;
justify-content:center;
Clique para expandir...

si le explicas estas propiedas dejale constancia del webkit porque de lo contrario no lo va a saber ver correctamente.
 
Inserir CODE, HTML ou PHP: 
.site-branding .image-logo { margin:0 auto;}
#logo a {
    float: center;
    color: #2A2A2A;
    font-weight: bold;
display: flex;
justify-content:center;
}
#logo a img { 
display: flex;
justify-content:center;
float: center 
}
No funciona [MENTION=125431]asesor[/MENTION] [MENTION=2092]krusty72[/MENTION]
 
tienes que hacerlo en css, simplfica tu logo. 🙂
 
Aun nada!
Sigo igual
 
Quita el float:center

De hecho float:center no existe.

Esto display: flex; justify-content:center; mételo en el .image-logo
 
Última edição:
Lo arregle con este código:

Inserir CODE, HTML ou PHP: 
.site-branding .image-logo {   margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 250px;
    margin-left: 300px; }
#logo a img {  width: 70% }

Ahora me toca ajustarlo manualmente
 
RedxLus disse:
Lo arregle con este código:

Inserir CODE, HTML ou PHP: 
.site-branding .image-logo {   margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 250px;
    margin-left: 300px; }
#logo a img {  width: 70% }

Ahora me toca ajustarlo manualmente
Clique para expandir...

Yo no lo veo arreglado, debes quitarle el float left que hay en esta clase .site-branding h1, .site-branding h2 ahi se te centrara

Screenshot by Lightshot
 
Muy raro lo que haces en ese código.. el enlace no es clickable en la parte derecha de la imagen
 
Você precisa estar logado ou cadastrado para responder aqui.
Voltar
Topo