Jump to content
Biel.

impedir imagem de ser jogada pra baixo

Recommended Posts

Boa tarde a todos. Direto ao ponto. Pessoal quando redimensiono o browser firefox a img_dois é jogada pra baixo. Gostaria que a img_dois não fosse jogada pra baixo quando o browser fosse redimensionado

Estou usando responsive design mode do firefox para redimensionar a tela

 

<!DOCTYPE html >
<html >
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
*{padding:0;margin:0;}
#topo_VJTSR{width: auto; float:left; background:#360;}
#topo_DCFWS{width:auto;  float: left; background:#360; }

.img_um{width:470px; height:135px;  } /* 470 + 179 = 649px  */
.img_dois{width:179px; height:135px;  }      

@media (max-width:470px) { 
    .img_um {width: 100%; height: 100%;   }
    
	}

@media (max-width:179px) { 
    .img_dois {width: 100%; height: 100%; }
	}


</style> 


</head>

<body>

<div id="topo_VJTSR"> <img src="imagem1.png" class="img_um"  /></div>
<div id="topo_DCFWS"><img src="imagem2.png"  class="img_dois" /></div>

</body>
</html>


 

Share this post


Link to post
Share on other sites

 

Oi, É Muito Simples, vamos fazer uma imagem responsiva, segue o código abaixo

#img {
	max-width:100%;
	height:auto;
}

Em max-width é o tamanho máximo que a imagem vai atingir. Espero ter ajudado ^^

 

Share this post


Link to post
Share on other sites
Em 10/11/2017 at 09:38, The Lars disse:

 

Oi, É Muito Simples, vamos fazer uma imagem responsiva, segue o código abaixo


#img {
	max-width:100%;
	height:auto;
}

Em maxPrimeiro post-width é o tamanho máximo que a imagem vai atingir. Espero ter ajudado ^^

 

the Lars não funcionou. #img coloco aonde para que a coisa funcione? Note que postei (duas imagens) com tamanho diferentes. Se você puder pegar todo o código que postei e fazer os devidos ajustes para que a coisa funcione dar forma que quero, ficaria muito grato. Obrigado!

Share this post


Link to post
Share on other sites

- Retire o float.

- As imagens devem ter display: table

- As imagens deve está em uma box grande o suficiente para caber ambas.

- A box que vai abrigar as imagens deve ser de tamanho fixo.

- A propriedade: "overflow-x: auto" na box mãe ajudará para o caso de renderização.

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 Biel.
      Direto ao ponto. Pessoa abaixo temos Ex1 e Ex2 . No Ex1 como faço para deixar disabled ( terça, quarta e sábado). Obrigado por sua atenção!
      Ex1
      <select name="semanas" size="7" style="font-size:20px;" required> <?php $dados = array("segunda", "terça", "quarta", "quinta", "sexta", "sábado", "domingo" ); for($a=0; $a <count($dados); $a++){ $exibe = $dados[$a]; ?> <option value="<?php echo $exibe; ?>" ><?php echo $exibe; ?></option> <?php } ?> </select> Ex2
      <select name="semanas" size="7" style="font-size:20px;" required> <option value="segunda" >seg</option> <option value="terça" disabled="disabled">ter</option> <option value="quarta" disabled="disabled">qua</option> <option value="quinta" >qui</option> <option value="sexta" >---</option> <option value="sábado" disabled="disabled">sab</option> <option value="domingo" >dom</option> </select>  
    • By Biel.
      Ola pessoal estou tentando imprimir 2019 2020 e 2021 três vezes usando apenas um for. Assim
       
      2019
      2020
      2021
      --------
      2019
      2020
      2021
      --------
      2019
      2020
      2021
      <?php  for($i=2019; $i <=2021; $i++){         echo $i .'<br />';         } ?>  
    • By Biel.
      Executar codigo php sem submit ou com submit e que a página não seja atualizada
      Pessoal o código php abaixo está funcionando normalmente, e após o submit  onChange="this.form.submit()" a página é atualizada. Gostaria que o código php abaixo funcionasse com submit ou sem submit, mas que a página não fosse atualizada . Dizem que é possível fazer isso com ajuda do javascript, jquery ou ajax. Como não sei nada de javascript, não sei por onde começar. Amigo, obrigado por sua atenção.  Nota:  Gostaria que o código php, html javascript ficasse tudo em uma só página. 
      <form action="" method="post" > <select name="teste" required size="3" onChange="this.form.submit()"> <option value="" ></option> <option value="aprendizA" >aprendizA</option> <option value="aprendizB" >aprendizB</option> </select> <hr /> <?php if (isset($_POST["teste"])){ ?> <?php if ($_POST['teste'] == ''){ ?> exibe 000 <?php } elseif ($_POST['teste'] == 'aprendizA'){ ?> exibe AAA <?php } elseif ($_POST['teste'] == 'aprendizB'){ ?> exibe BBB <?php } } ?> <hr /> <input type="text" name="gggg" required value="" /> </form>  
    • By Biel.
      Direto ao ponto. Pessoal abaixo temos um Ex em php que está interagindo com select e funcionando normalmente; o problema é que a página é carregada quando seleciono um item qualquer. Gostaria que continuasse funcionando normalmente, mas sem carregar a página.
      <form action="" method="post" > <select name="teste" required size="3" onChange="this.form.submit()"> <option value="" ></option> <option value="aprendizA" >aprendizA</option> <option value="aprendizB" >aprendizB</option> </select> <hr /> <?php if (isset($_POST["teste"])){ ?> <?php if ($_POST['teste'] == ''){ ?> exibe 000 <?php } elseif ($_POST['teste'] == 'aprendizA'){ ?> exibe AAA <?php } elseif ($_POST['teste'] == 'aprendizB'){ ?> exibe BBB <?php } } ?> <hr /> digite um texto qualquer <input type="text" name="gggg" required value="" /> </form>  
    • By Biel.
      Olá pessoal. Abaixo temos EX1 em javascript e EX2 em php. Os dois exemplos estão funcionando normalmente. 
      No php tem +3 month. Gostaria que ao selecionar um item qualquer, o php pegasse automaticamente o item selecionado ou seja 1 , 2  ou 3 e exibisse o novo valor strtotime . Vejam:
      EX1
      <select name="ggg" id="select_1" required onChange="tete();" > <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> </select> <hr> exibe <p id="teste" >...</p> <script> function tete(){ var x = document.getElementById('select_1').value; document.getElementById('teste').innerHTML = x; } </script> ...
      Ex2
      <?php $mes = strtotime(date('FY')); $end = strtotime("+3 month",$mes); echo $end ?>  
×

Important Information

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