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.
Conectar-se

Esqueci minha senha

Últimos assuntos
» Ferramentas Moderativas
Hoje à(s) 18:45 por William_iHarDz

» Botões de Fixo e Resolvido
Hoje à(s) 18:19 por Ketholy

» Calculadora específica
Hoje à(s) 17:17 por BrunoLemos

» Erro de segurança, phishing
Hoje à(s) 17:11 por Shek

» Problema com Widget Tópicos Recentes
Hoje à(s) 16:53 por brunopro

» Cor da barra
Hoje à(s) 16:33 por Ketholy

» Resposta Topico
Hoje à(s) 14:47 por Ketholy

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Ketholy
 
Gaaratsu
 
Shek
 
Fou-Lu
 
Eduardo Lima
 
while
 
Jeckwilke
 
LucasPofahl
 
brunopro
 
paulim78
 

Quem está conectado
290 usuários online :: 15 usuários cadastrados, 1 Invisível e 274 Visitantes :: 3 Motores de busca

banzé, brunopro, Call Manuel, EDU2010, Froozen, Holkis, Jeckwilke, Kenno LP, Ketholy, Lincoln, Lost154, odelgado, paulim78, Railison Ramon, William_iHarDz

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 12: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 - 16: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
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1088
Pontos Ativos : 1555

Ver perfil do usuário http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Retirar proporção de uma imagem

Mensagem por while em Qua 15 Mar 2017 - 17: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.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3129
Pontos Ativos : 4558

Ver perfil do usuário http://www.ajuda.forumeiros.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 - 18: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
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1088
Pontos Ativos : 1555

Ver perfil do usuário http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Retirar proporção de uma imagem

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

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

E preencherá todo o widget.

Até mais.
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3129
Pontos Ativos : 4558

Ver perfil do usuário http://www.ajuda.forumeiros.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 - 19:55

Resolvido obg pode fechar.
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1088
Pontos Ativos : 1555

Ver perfil do usuário http://Ajuda.Forumeiros.com

Resolvido Re: Retirar proporção de uma imagem

Mensagem por while em Qua 15 Mar 2017 - 20: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".
avatar

while
Hiperativo

Masculino
Inscrito dia : 24/04/2016
Mensagens : 3129
Pontos Ativos : 4558

Ver perfil do usuário http://www.ajuda.forumeiros.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