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
» Aparecer pop-up de login ao clicar em Conectar-se
Hoje à(s) 05:42 am por Luiz

» Colocar link do perfil no menu
Hoje à(s) 05:39 am por Luiz

» Personalizar barra de ferramentas
Hoje à(s) 05:25 am por Flames

» Logo do fórum
Hoje à(s) 05:04 am por Luiz

» Cor do fundos dos tópicos
Hoje à(s) 05:02 am por Luiz

» Como adicionar um Painel de Usuário no fórum?
Hoje à(s) 04:59 am por Luiz

» Categoria do fórum
Hoje à(s) 12:06 am por PrisoN†BreaK

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
Luiz
 
Fatalisss
 
Holkis
 
Flames
 
JulioPais
 
Shek
 
APOllO
 
Forumpw
 

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

Flames, Luiz

[ 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

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 : 3105
Pontos Ativos : 4499

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 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

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 : 3105
Pontos Ativos : 4499

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 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

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 : 3105
Pontos Ativos : 4499

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