Ir para conteúdo
Alphb

Redimensionar imagem css

Recommended Posts

Oii, podem me ajudar

 

Tipo com o <img>

Eu adiciono a imagem tipo width:100%;

Height:100%;

Esses 100% não deveria ser 100% do width/height da imagem, mas ela ta ocupando os 100% da div até mesmo do body todo ._.

 

Tipo eu quero deixar a imagem pequena mas proporcional 

Pq não vai ser só uma imagem vai ser varias de tamanho diferente e ela ficam grande só com <img> sem CSS

Já tentei Max-width/height, Min-width/height

E não tou fazendo com PX pq se alguém acessar o site com um tablet o PX vai ser maior doq no smartphone._.

 

E quando ta perfeito o height ta um pouquinho grande além do tamanho proporcional ao da width e fica aquela imagem meio esticada e fora de resolução

 

Exemplo no facebook as imagens dos posts ficam proporcionais e quando não a imagem corta e se clicar na imagem fica tela cheia e a imagem fica perfeita sem perda

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa, buenas.

 

Tem o trecho do código que você está utilizando?? Fica mais fácil de ver onde está o problema.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por jgasper
      Boa tarde, preciso de ajuda, fiz o site para minha empresa de advocacia mas nao sei transformar em mobile, peguei template pronto e fiz modificações, nao sou bom em HTML, foi o que consegui fazer. Alguem pode me ajudar a transformar ele em responsivo? só fazendo o menu funcionar para celular?
       
      Os arquivos do site estao em: https://mega.nz/#!AEAUxa5Z!EwFVVhgaJeJg6DTFpzUfi0vnrULPzI8YI9I0-XJwaE8
       
      Agradeço desde ja.
    • Por Artes Ussler
      Bom dia
       
      Alguns navegadores sublinham ou trocam a cor dos números de telefones que estão no site.
       
      Como faço para remover isso?
       
      Se alguém puder ajudar, eu fico grato.
    • Por freitaz
      Bom eu criei um sistema de cadastro, estava tudo ok, no localhost, mas quando subi para o servidor, teve paginas que não carregou o html, 
      e ficou dessa forma

       
      Gostaria de ajuda, e desde já agradeço! 
    • Por David Cesar
      Não gosto dessa opacidade que meu menu ficou. Tentei isso: 

      Gostaria que a moderação excluísse o tópico, parece que era por causa da propriedade "z-index".

       
      header .head { background: #000000; height:95px; position:fixed; left:15px; width:100%; opacity:1; }  
    • Por LuizH.M
      Então gente eu to com um menu mas não consigo deixar ele responsivo, eu sei q existe varios outros menus responsivo na internet mas meu site ja ta pronto so falta a parte do menu conto com a ajuda de vcs
       
      HTML
      <!-- Barra de Menu -->
      <div class="container">
          <nav class="menu">
              <ul>
                  <li><a href="index.php">Home</a></li>
                  <li><a href="agenda.php">Agenda</a></li>
                  <li><a href="departamento.php">Departamento</a></li>
                  <li><a href="https://www.flickr.com/photos/142117425@N02/" target="blanck">Fotos</a></li>
                  <li><a href="#localizacao">Localização</a></li>
                  <li><a href="https://www.facebook.com/deives.duarte.9"  target="blanck" class="fa fa-facebook"></a></li>
                  <li><a href="#" target="blanck" class="fa fa-twitter"></a>
                  <li><a href="#" class="fa fa-youtube"></a>
              </ul>
          </nav>
      </div>
       
      CSS
      .container {
        position: absolute;
        margin: 20px;
        width: auto;
      }

      .menu{
      width:100%;
      height:54px;
      background-color: #333;
      font-family:'Arial';
      }
      .menu ul{
      list-style:none;
      position:relative;
      background-color: #333;
       /*css custom*/
        display: flex;
        flex-wrap: wrap;
        padding-left: 0px;
      }
      .menu ul li{
      width:50px auto;
      float:left;
      }
      .menu a{
      padding:15px;
      display:block;
      text-decoration:none;
      text-align:center;
      color:#fff;
      }
      .menu ul ul{
      position:absolute;
      visibility:hidden;
      }
      .menu ul li:hover ul{
      visibility:visible;
      }
      .menu a:hover{
      background-color:#f4f4f4;
      color:#555;
      }
      .menu ul ul li{
      float:none;
      border-bottom:1px solid #ccc;
      }
      .menu ul ul li a{
      background-color:#069;
      }
      @media screen and (max-width: 640px){
      .menu ul li{
              width: 100%;
              text-align:center;
          }
          .menu a{
              text-align:center;
          } 
      }
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.