Jump to content
phk

Como aumentar ícone conforme a tela diminui

Recommended Posts

Olá.

 

Estou criando um site e já consegui fazer as fontes mudarem de tamanho, conforme o tamanho da tela. Se a tela do usuário for um celular, as fontes aumentam e ficam legíveis.

 

Agora preciso que determinados ícones em png, também aumentem da mesma forma, ficando legíveis em telas menores.

 

O código de uma das imagens é este:

<img style="width: 45px; height: 12px;" alt="" src="logomar.png"><br>

Queria saber o que devo incluir para que quando a tela for menor que 480 pixel, a imagem dobre de tamanho.

 

Obrigado.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By merlinus
      Saudações, tive recentemente a troca de servidor, no novo servidor um script para envios de arquivos parou de funcioar para arquivos maiores de 1M (acho)
      Consigo enviar um arquivo de 130k tranquilamente, qdo envio de 1.5M dá o sequinte erro:
       
      estou com as seguintes configurações do php.ini (confirmei usando phpinfo)
      memory_limit: 128M
      post_max_size: 8M
      upload_max_filesize: 10M
       
      Alguma ideia de que configuração pode estar dando erro?
    • By mytools
      Boa noite,
      Podem me ajudar com o botão comprar da minha loja?
      Gostaria de deixar um pouco menor, mas não sei onde alterar no html/css
       
      http://style-theme.lojavirtualnuvem.com.br/br/
    • By mytools
      Boa noite,
      Podem me ajudar com o botão comprar da minha loja?
      Gostaria de deixar um pouco menor, mas não sei onde alterar no html/css
       
      http://style-theme.lojavirtualnuvem.com.br/br/
       
    • By Simba_RJ
      Olá pessoal, 
      Minha dúvida é no comando "find" do linux Debian 3.16
      Estou tentando buscar em uma pasta e subpasta, todos os arquivos duplicados e o tamanho de cada arquivo.
      os arquivos duplicados eu já consegui, só falta informar o tamanho de cada arquivo.
      O comando para busca dos duplicados é;
       
      sudo find /SEUDIRETORIO/ -type f -exec md5sum {} \; | sort -nr | uniq --all-repeated=separate -w 20
       
      O comando acima lista todos os arquivos duplicados, porém, alguém sabe como eu consigo incluir no resultado da busca o tamanho dos arquivos?
       
    • By Gilberto Jr
      Bom dia Pessoal;
       
      Seguinte, eu criei o menu bootstrap segue o código abaixo. Quando eu estou vendo o site pelo celular, o menu vira um HAMBURGUER. Só que eu quero quando clicar no HAMBURGUER ele vira um X.
      E quando eu clicar no link ele voltar para o HAMBURGUER.

      <nav class="navbar navbar-default navbar-fixed-top">                  <!--INICIO DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES-->         <div class="container-fluid containertop" id="topoinicio">                      <div class="navbar-header">                 <!--INICIO CONFIGURAÇÃO MENU HAMBERGUER-->                 <button type="button" class="navbar-toggle menuHamburguer" data-toggle="collapse" data-target="#menu-navegacao">                     <span class="icon-bar top-bar"></span>                     <span class="icon-bar middle-bar"></span>                     <span class="icon-bar bottom-bar"></span>                 </button>                 <!--FIM CONFIGURAÇÃO MENU HAMBERGUER-->                 <!--INICIO LOGO MARCA-->                                  <!--<a class="navbar-brand" href="#page-top">                     <span class="iden">Iden</span> <span class="techonology">Technology</span>                 </a>-->                 <ol class="nav">                 <ol class="menu" style="border:none;">                     <a href="#home">                     <img src="img/ico_3.png" class="img-responsive img-rounded imgLogo">                     </a>                 </ol>                 </ol>                                  <!--FIM LOGO MARCA-->             </div>             <!--INICIO MENU LINK-->             <div class="collapse navbar-collapse menu-navegacao" id="menu-navegacao">                                  <ul class="nav navbar-nav navbar-right">                     <li class="menu">                         <a href="#home">HOME</a>                     </li>                     <li class="menu">                         <a href="#solucoes">SOLUÇÕES</a>                     </li>                                          <li class="menu">                         <a href="#servicos">SERVIÇOS</a>                     </li>                                         <li class="menu">                         <a href="#empresa">EMPRESA</a>                     </li class="menu">                     <li class="menu">                         <a href="#localizacao">LOCALIZAÇÃO</a>                     </li>                                         <li class="menu">                         <a href="#contato">CONTATO</a>                     </li>                     <li class="abrirlink">                         <a href="https://identechnology.tomticket.com?account=444224P07112016122136" title="Acessar Help Desk" target="_blank">TICKET<a>                     </li>                                                                                                 </ul>             </div>             <!--FIM MENU LINK-->         </div>         <!--FIM DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES-->     </nav>
       
      Eu tenho esse código abaixo CSS, que funciona um pouco. Só que o ele ja abre com o X.

      <style type="text/css">        .navbar-toggle {   border: none;   background: transparent !important; } .navbar-toggle:hover {   background: transparent !important; } .navbar-toggle .icon-bar {   width: 22px;   transition: all 0.2s; } .navbar-toggle .top-bar {   transform: rotate(45deg);   transform-origin: 10% 10%; } .navbar-toggle .middle-bar {   opacity: 0; } .navbar-toggle .bottom-bar {   transform: rotate(-45deg);   transform-origin: 10% 90%; } .navbar-toggle.collapsed .top-bar {   transform: rotate(0); } .navbar-toggle.collapsed .middle-bar {   opacity: 1; } .navbar-toggle.collapsed .bottom-bar {   transform: rotate(0); } </style>
      Veja a imagem abaixo de quando eu entro no site. Ele entra com o X. E quando eu clico pela primeira vez no X, ele continua o x. E quando pela segunda vez clico no X ou clico em menu da lista ele volta para o HAMBURGUER.
       
      Para ajudar, segue o link do site.
      Iden Technology
       


×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.