[SOLUCIONADO] Consulta con CSS - Problema de imagenes

[ezemartinezna]

Estimados,

Me presento, que tal, soy ezequiel y estoy teniendo una dificultad en poner 2 imagenes en un mismo <div/>

Código HTML:

<div class="gametracker">
	<IMG src="http://cache.www.gametracker.com/server_info/14567/b_560_95_1.png" border="1" id="refreshImage" class="img_gametracker" >
	<IMG src="{T_THEME_PATH}/images/fondo1.png" class="img_fondo">
	</div> 

codigo css

Código:

.gametracker {
	text-align: center;
	

}

.img_gametracker {
	max-width: 100%;
	max-height:100%;

}

.img_fondo {
	max-width: 100%;
	max-height:100%;
}

Las 2 imágenes se encuentran en el mismo espacio y conviven en armonía si el width del browser es lo suficientemente ancho.
Si la ventana del browser, disminuye, las 2 imágenes ya no se encuentran en la misma fila. Necesitaría que se queden siempre en la misma fila y vayan disminuyendo su tamaño a la par.

Asi se representa el problema->




Muchas gracias y disculpen lo novato que soy.
Saludos.

[xfxstudios]

saludos, prueba asi:

Código CSS:

.contenedor{
    width:100%;
}
.imge{
    /*display:inline-block;*/
    width:50%;
    float:left;
}
img{
    width:100%;
}
 

Código HTML:

<div class="contenedor">
    <div class="imge">
        <img src="http://www.forosdelweb.com/f53/imagenes/slider/1.jpg"/>
    </div>
    <div class="imge">
        <img src="http://www.forosdelweb.com/f53/imagenes/slider/4.png"/>
    </div>
</div>
 

MUESTRA: http://jsfiddle.net/bc9o5a34/

[ezemartinezna]

Gracias por la respuesta pero sigue sin funcionar, me agranda una de las imagenes y agrupandolas una debajo de otra.

[xfxstudios]

muestra el codigo a ver como lo tienes pero deberia de funcionarte salvo que te saltaras algo

[ezemartinezna]

Código CSS:

.gametracker {
    width:100%;
    
}
 
.img_gametracker {
    width:50%;
    float:left;
}
 
.img_fondo {
  width:100%;
}
 

Código HTML:

<div class="gametracker">
     <div class="img_gametracker">
    <IMG src="http://cache.www.gametracker.com/server_info/190.220.150.98:14567/b_560_95_1.png"         border="1" id="refreshImage" >
    </div>
    
    <div class="img_fondo">
    <IMG src="{T_THEME_PATH}/images/fondo1.png">
    </div>
 
</div>
 

Avisame si hay algo incorrecto. Me habia olvidado de dividir tmb las 2 imagenes.
Ahora se ve un poco mejor pero no se re dimensionan ninguna de las 2 imagenes.

[AngelKrak]

Prueba con esto amigo ;)

Código CSS:

* {
  margin: 0;
  padding: 0;
}
.gametracker {
  width: 100%;
}
 
.img_gametracker {
  width: 50%;
  float: left;
}
 
.img_fondo {
  width: 50%;
  float: left;
}
div img {
  width: 100%;
}
 

http://codepen.io/AngelKrak/pen/zvgrgx

[xfxstudios]

bueno para empezar esto:

Código CSS:

/*El contenedor abarca todo el ancho de la pantalla*/
.contenedor{
    width:100%;
}
/*Los DIVs contenedores de las imágenes abarcan solo la mistan del ancho de pantalla cada uno*/
.imge{
    /*display:inline-block;*/
    width:50%;
    float:left;
}
 
/*las imágenes abarcan el ancho total de cada uno de sus contenedores (los anteriores)*/
img{
    width:100%;
}
 

en el tuyo:

Código HTML:

<div class="gametracker"><!--Este contenedor debe cubrir el ancho completo
 
     <div class="img_gametracker"><!--este solo el 50% del ancho-->
    <IMG src="http://cache.www.gametracker.com/server_info/190.220.150.98:14567/b_560_95_1.png" border="1" id="refreshImage" class="img_fondo" >
    </div>
    
    <div class="img_gametracker"><!--este tambien el 50% del ancho, es decir, deberia de tener la misma clase que el DIV anterior-->
    <IMG src="{T_THEME_PATH}/images/fondo1.png"  class="img_fondo">
    </div>
 
</div>
 
<!--y las 2 imagenes el 100% de sus contenedores-->
 

algo asi

[ezemartinezna]

Iniciado por xfxstudios

bueno para empezar esto:

Código CSS:

/*El contenedor abarca todo el ancho de la pantalla*/
.contenedor{
    width:100%;
}
/*Los DIVs contenedores de las imágenes abarcan solo la mistan del ancho de pantalla cada uno*/
.imge{
    /*display:inline-block;*/
    width:50%;
    float:left;
}
 
/*las imágenes abarcan el ancho total de cada uno de sus contenedores (los anteriores)*/
img{
    width:100%;
}
 

en el tuyo:

Código HTML:

<div class="gametracker"><!--Este contenedor debe cubrir el ancho completo
 
     <div class="img_gametracker"><!--este solo el 50% del ancho-->
    <IMG src="http://cache.www.gametracker.com/server_info/190.220.150.98:14567/b_560_95_1.png" border="1" id="refreshImage" class="img_fondo" >
    </div>
    
    <div class="img_gametracker"><!--este tambien el 50% del ancho, es decir, deberia de tener la misma clase que el DIV anterior-->
    <IMG src="{T_THEME_PATH}/images/fondo1.png"  class="img_fondo">
    </div>
 
</div>
 
<!--y las 2 imagenes el 100% de sus contenedores-->
 

algo asi

GENIO!

Ahi funciona a la perfección!

Gracias!!!

Muchas gracias a ambos que me contestaron
Abrazo!