Jump to content
Nada Oficial

Dúvida CSS - Redimensionamento Automática de Imagens

Recommended Posts

Prezados, boa tarde.

 

Tenho o respectivo Blogger, Blogger do Nada Oficial. Como podem ver na postagem principal, a imagem está cortada nas extremidades laterais.

Gostaria de saber se é possível programar o CSS para que, não redimensione a DIV, mas a imagem (sem distorcê-la) para que ela caiba na respectiva DIV, por gentileza.

 

Desde já agradeço a ajuda,

Bom final de semana.

Share this post


Link to post
Share on other sites

Olhando o código fonte rapidamente me parece algum problema no modo que a imagem é inserida no corpo da página. Provavelmente o blogspot automaticamente corta a imagem de acordo com a resolução. Tente ver alguma coisa sobre isso no seu painel administrativo do blog..

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 ricardonews
      Olá pessoal eu tenho essa imagem de um login  que vou mostrar aqui, consegui  o css dela , porem não consegui colocar no meu login,  eu vou deixar o login em html,  em css eu estou  dificuldade. Desde já agradeço a todos
       

       então eu o css dela é esse aqui
      *{margin:0; padding:0;} html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } .erros, .ok { width:390px; padding:5px; background:rgba(238, 249, 113, 0.9); margin: 20px auto 0 auto; border: 1px solid rgba(222,239,10,0.9); border-radius: 4px; color: #333; } .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;} body{ font-family: "Trebuchet MS", tahoma, arial; } #formulario{ width:500px; margin:40px auto; text-align:center; position:relative; } #formulario fieldset{ background:white; border:0 none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 15px 1px rgba(0,0,0, 0.4); padding:20px 30px; box-sizing: border-box; width:80%; margin:0 10%; position:absolute; } #formulario input, #formulario textarea{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #formulario .acao{ width:100px; background:rgba(38, 128, 101, 0.9); color:white; text-transform:uppercase; font-weight:bold; padding:12px 0; float:left; margin-right:5%; } #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;} Aqui abaixo é o html que eu não consegui deixar no css do jeito que está na imagem.
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>APRENDIZ DE JS</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> </div> </div> </div> </body> </html>  
       
    • By egalauber
      Quero que meus links tenham marcadores e que os marcadores fiquem selecionados juntos com o link. Pra isso, coloquei o LI dentro do A. <a><li>meu link</li></a>
      Só que o link ficou muito grande. Mesmo com o mouse longe do texto, ele já ativa o link. Vejam na imagem.
       

       
      Vejam o código:
       
      CSS
      #links_uteis {
              width:482px;
              height:230px;
              float:right;
              margin-top:20px;
              margin-right:20px;
              font-size:20px;
              list-style-type:disc;
              list-style-position:inside;
          }
      #links_uteis table {
              width:420px;
              margin-left:10px;
          }
      #links_uteis td {
              width:210px;
              padding:5px 10px 5px 10px;
          }
      #links_uteis a:hover {
              text-decoration:underline;
              color:#D90000;
          }
       
       
      HTML
      <div id="links_uteis">
      Links úteis
      <div class="barra_titulo"></div>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
          <a href="#" target="_blank"><li>Inmetro</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>Seplag</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Ipsemg</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>IOF-MG</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>ALMG</li></a>
          </td>
          <td>
          <a href="#" target="_blank"><li>MGS</li></a>
          </td>
        </tr>
        <tr>
          <td>
          <a href="#" target="_blank"><li>Portal de serviços</li></a></td>
          <td>
          <a href="#" target="_blank"><li>Portal do servidor</li></a></td>
        </tr>
      </table>

      </div> <!--Fecha a div links_uteis-->
    • By guzulino
      É o seguinte no cabeçalho do meu projeto tem uma parte um link que leva a parte principal do site, nessa parte a imagem que está lá dentro redireciona o visitante pra página de destino até aí beleza, mas como eu tenho de definir um tamanho pra imagem eu faço via style na tag do link mesmo no <a style=" "></a>, mas quando tento colocar essa parte do código em uma linha dentro do arquivo CSS que contém todas as estilizações padrão, ele simplesmente não acontece. Vou postar a parte do código e como acho que deveria ser, mas pelo jeito não é essa a forma correta.
      <body> <div id="site"> <div id="cabecalho"> <div id="link_home"> <a href="index.php"> <img src="imagens/logo.png" alt="logo" style="height: 50px;"/><!--Esse style="height: 50px;" é que eu quero no CSS pra estilização padrão--> </a> </div><!--Final botão logo--> body { background-color: #131521; width: 1000px; margin: auto; font-family: Arial, Helvetica, sans-serif; } #site { background-color: #ffffff; width: 1000px; float: left; } #cabecalho{ background-color: #ffffff; float: left; width: 1000px; height: 70px; } #link_home{ float: left; height: 50px; margin-top: 5px; margin-left: 5px; } #link_home a img { height: 50px; } /* Quando eu coloco aqui no CSS e tiro do HTML ele não funciona */ A grande moral é que eu não sei como indicar pro CSS que é pra alterar somente aquela img daquele a que está dentro daquela DIV
    • By jujubeas
      Ola pessoal, alguém tem algum código javascript ou pode me dar algum link como referencia que tenha um questionario/quiz que use arrays e estruturas de repetição?
       
       
    • By MurilloCSS
      Bom dia galera venho aqui falar que to com uma duvida imensa mesmo eu criei  4 botões como na foto  e eu quero mover pro lado que ta em vermelho mas de jeito nenhun eu consigo alguem pode me ajudar?


      codigo: 
      < <div class="menubarra"> <img src="imagens/logo.png" alt="Logo" title="" width="200"> <a href="" class="btn btn-purple">Login</a> <a href="" class="btn btn-purple">Carrinnho</a> <a href="" class="btn btn-purple">Amei</a> <a href="" class="btn btn-purple">Notificacao</a> </div> > CSS: < .menubarra{ background: #1E90FF; top: 100%; margin-block-end: 0%; left: 100px; } >

×

Important Information

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