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
» Dúvida Smiles
Hoje à(s) 12:41 am por Ketholy123

» Menu Mensagem Privada
Hoje à(s) 12:13 am por Ketholy123

» Visibilidade das imagens e endereços /site apenas para os usuários registados
Ontem à(s) 10:59 pm por Ketholy123

» Como fixa uma imagem em todas as postagens
Ontem à(s) 08:59 pm por Ketholy123

» Mudar cor da fonte/letra do perfil
Ontem à(s) 08:34 pm por Ketholy123

» [Avatar] Fórum
Ontem à(s) 07:51 pm por Tiger

» Logo para um fórum
Ontem à(s) 07:48 pm por Tiger

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Ketholy123
 
iScroll
 
Fou-Lu
 
Matt Shultz
 
Harleen
 
Shek
 
ranzatti
 
zHugh
 
T1ag0
 

Quem está conectado
201 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 195 Visitantes :: 2 Motores de busca

CaioCrisostomo, Kadso, Ketholy123, tatsuhito, vinicius.ueh00, xDominiC_.

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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 15/03/17, 04:30 pm

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 : 1080
Pontos Ativos : 1543

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

Resolvido Re: Retirar proporção de uma imagem

Mensagem por while em 15/03/17, 05:31 pm

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 : 3107
Pontos Ativos : 4515

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 15/03/17, 06:51 pm

É 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 : 1080
Pontos Ativos : 1543

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

Resolvido Re: Retirar proporção de uma imagem

Mensagem por while em 15/03/17, 07:42 pm

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 : 3107
Pontos Ativos : 4515

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 15/03/17, 07:55 pm

Resolvido obg pode fechar.
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

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

Resolvido Re: Retirar proporção de uma imagem

Mensagem por while em 15/03/17, 08:01 pm

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 : 3107
Pontos Ativos : 4515

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