Ajuda para fazer as imagens responsivas

  • Autor Autor Cabecita
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
C

Cabecita

Beta
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Hola nuevamente, les pido su ayuda en el aspecto de un codigo MathRandom donde el resultado son imagenes aleatorias, quiero lograr que estas imagenes resultantes puedan adaptarse a los moviles.. les comparto el codigo como lo tengo hasta el momento:

<div id="div">
<div align="center">
<span style="font-size:40px;">Tu resultado es</span><br><br>


<script type="text/javascript">

setTimeout('gizle()',3000);

function gizle() {

var x=document.getElementById('birinci').style;

var y=document.getElementById('ikinci').style;

if(x.display=='block') { x.display='none'; y.display='block'; }

else { x.display='block'; y.display='none'; }

}
var imageURLs = [
"img/resultado1.jpg"
, "img/resultado2.jpg"
, "img/resultado3.jpg"
, "img/resultado4.jpg"
, "img/resultado5.jpg"
, "img/resultado6.jpg"
, "img/resultado7.jpg"
, "img/resultado8.jpg"
, "img/resultado9.jpg"
, "img/resultado10.jpg"
];
function getImageTag() {
var img = '<img src="';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '" alt="Some alt text"/>';
return img;


}

</script>
<div id="birinci" style="display:block">
<br>
<span style="font-size:20px;">Generando la frase típica que dice tu mama</span><br>
<img src="http://chiquitests.com/prueba1/img/gif_carga.gif" style="max-width:100%;"><br><br><br>
<br><br>
</div>

<div id="ikinci" style="display:none">
<br>
<script type="text/javascript">
document.write(getImageTag());
</script>
</div>

<hr>

</div>
</div>


La parte que dice "Tu resultado y el gif" si se adaptan, pero las imagenes resultantes NO 🙁 (las 10 imagenes que estan en varURL), me podrían ayudar?? saludoss
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Hola,

¿Has probado a imprimir la imagen en el JavaScript asignándole una clase, y después, declarar los atributos a esa clase mediante css? Es la mejor forma.
Supongamos que tienes la imagen con clase .img-responsive (como Bootstrap), el CSS debería ser:

Inserir CODE, HTML ou PHP:
.img-responsive{
     max-width:100%;
     width:100%;
}

Así, conseguirías tener la imagen ocupando el 100% del contenedor, siempre y cuando la imagen sea más grande que el contenedor o de lo contrario se mostrará todo el ancho posible.
 

Tópicos similares

P
Respostas
10
Visitas
1K
Ps3Descargas
P
Voltar
Topo