Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
» Bug nos modelos de postagem.
Hoje à(s) 17:24 por Luiz~

» Melhorar a popularidade do fórum
Hoje à(s) 17:24 por Luiz~

» Modificação nos ranks
Hoje à(s) 17:23 por Luiz~

» Apenas o Dono ve os templates
Hoje à(s) 17:23 por Luiz~

» Barra de posts
Hoje à(s) 17:22 por Luiz~

» Criar uma página HTML para menu
Hoje à(s) 17:20 por Luiz~

» Logo Móvel
Hoje à(s) 17:06 por Luiz~

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
288 usuários online :: 10 usuários cadastrados, 1 Invisível e 277 Visitantes :: 2 Motores de busca

Connor R., iScroll, Jefferson105, Kyo Panda, Luiz~, Oliver Miller, PESS_dodo, Shek Crowley, Thomazinny, YouTube3

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Retirar proporção de uma imagem

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Retirar proporção de uma imagem

Mensagem por YouTube3 em Qua 15 Mar 2017 - 19:30

Detalhes da questão


Endereço do fórum: http://vgnfamily.forumais.com
Versão do fórum: punBB

Descrição


Recentemente botei um widget de TeamSpeak, no fórum porem ele fica bugado.

Eu botei uma imagem no tamanho de: 300x200 e ele fica assim: http://i.imgur.com/XT9uGpP.jpg
Com a imagem pequena link da imagem: http://i.imgur.com/w3aGrMB.png

Código do widget caso precisar:
Código:
<a href="ts3server://ts.brasilplaygames.com.br/?port=porta-do-servidor" class="fa-custom-widget-teamspeak">  <span class="fa-custom-widget-teamspeak-background"></span>  <span class="fa-custom-widget-teamspeak-default">TEAMSPEAK 3</span>  <span class="fa-custom-widget-teamspeak-hover">CONECTAR-SE</span></a>  <style>
  .fa-custom-widget-teamspeak {
    display: block;
    height: 200px;
    position: relative;
    border: 1px #fff solid;
    width: 100%;
    overflow: hidden;
  }
 
  .fa-custom-widget-teamspeak-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(http://i.imgur.com/w3aGrMB.png) no-repeat center center;
    background-size: 70% auto;
    transition: .5s ease filter;
  }
 
  .fa-custom-widget-teamspeak-default,
  .fa-custom-widget-teamspeak-hover {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    transform: translate(0%, -10%);
    display: block;
    line-height: 30px;
    margin-top: -15px;
    background-color: #333;
    color: #fff;
    opacity: 1;
    transition: .5s ease;
    transition-property: transform, opacity;
  }
 
  .fa-custom-widget-teamspeak-hover {
    background-color: #fff;
    color: #333;
    opacity: 0;
  }
 
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-default,
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-hover {
    transform: translate(0%, 10%);
  }
  
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-default {
    opacity: 0;
  }
 
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-hover{
    opacity: 1;
  }
 
  .fa-custom-widget-teamspeak:hover .fa-custom-widget-teamspeak-background {
    filter: blur(10px);
  }
</style>
avatar

YouTube3
Usuário destaque

Masculino
Inscrito dia : 04/01/2015
Mensagens : 970
Pontos Ativos : 2202

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Retirar proporção de uma imagem

Mensagem por while em Qua 15 Mar 2017 - 20:31

Olá autor, boa tarde.

Não é bug Rindo , você está utilizando uma propriedade que faz diminuir/aumentar a proporção da imagem, e está no valor 70%,ou seja você ta usando 70/100% do valor original dela.

Para ter o tamanho padrão mesmo da imagem, procure por:

Código:
background-size: 70% auto;

E troque por:

Código:
background-size: 100% auto;

Até mais.


Flecha ajudeiros Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Flecha ajudeiros Respeite as Regras da seção de Suporte.
Flecha ajudeiros MP apenas para assuntos importantes!
Flecha ajudeiros Seu tópico foi resolvido ? Não se esqueça de clicar no
avatar

while
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3103
Pontos Ativos : 4827

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Retirar proporção de uma imagem

Mensagem por YouTube3 em Qua 15 Mar 2017 - 21:51

É realmente.. quando boto a imagem, percebi que só fica no meio assim: http://i.imgur.com/8YX2Vac.jpg ao invés de ficar só no meio é possível ocupar todo o espaço branco do widget com a imagem?
avatar

YouTube3
Usuário destaque

Masculino
Inscrito dia : 04/01/2015
Mensagens : 970
Pontos Ativos : 2202

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Retirar proporção de uma imagem

Mensagem por while em Qua 15 Mar 2017 - 22:42

Como desejar, retire do seu css essa propriedade:
Código:
background-size: 100% auto;

E preencherá todo o widget.

Até mais.


Flecha ajudeiros Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Flecha ajudeiros Respeite as Regras da seção de Suporte.
Flecha ajudeiros MP apenas para assuntos importantes!
Flecha ajudeiros Seu tópico foi resolvido ? Não se esqueça de clicar no
avatar

while
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3103
Pontos Ativos : 4827

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Resolvido Re: Retirar proporção de uma imagem

Mensagem por YouTube3 em Qua 15 Mar 2017 - 22:55

Resolvido obg pode fechar.
avatar

YouTube3
Usuário destaque

Masculino
Inscrito dia : 04/01/2015
Mensagens : 970
Pontos Ativos : 2202

http://Ajuda.Forumeiros.com

Resolvido Re: Retirar proporção de uma imagem

Mensagem por while em Qua 15 Mar 2017 - 23:01

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".


Flecha ajudeiros Respeite as Regras do fórum e conheça a nossa equipe e diretrizes do FdF!
Flecha ajudeiros Respeite as Regras da seção de Suporte.
Flecha ajudeiros MP apenas para assuntos importantes!
Flecha ajudeiros Seu tópico foi resolvido ? Não se esqueça de clicar no
avatar

while
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3103
Pontos Ativos : 4827

http://www.ajuda.forumeiros.com https://www.facebook.com/https://www.facebook.com/profile.php?id=100012157981279

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum