[SOLUCIONADO] Responsive a 3 imagenes en linea dentro de un div

[guichogdl]

Buen dia, tengo un problema con un div que contiene 3 imagenes de manera lineal, necesito que se mantengan en linea al cambiar el tamaño de la ventana o de cualquier dispositivo asi como cuando se gira.

El div que las contiene esta al centro de la pagina en 900px;

Eh intentado usar estas reglas, pero no eh tenido exito.

html

Código HTML:

<div id="mi_div">
    <img src="xxx" />
    <img src="xxx" />
    <img src="xxx" />
</div>
 

css

Código CSS:

#mi_div { 
  margin: 0 auto; 
  width: 900px;
}
 
#mi_div img {
  max-width: 300px;
  width: auto;
}
 

*Tambien use javascript donde calculo el tamaño del div y divido entre el numero de imagenes y les asigno el resultado al width de las imagenes pero no ah sido lo mas optimo y aparte falla mucho.

Gracias de antemano por su ayuda

[Pelipe]

El div que las contiene esta al centro de la pagina en 900px;

Es dificil que sea adaptable la pagina de imagenes cuando dices que tiene un ancho fijo de 900px, tienes que trabajar con porcentajes

Esta seria para una imagen adaptable y para que se mantengan las 3 imagenes creas columnas con porcentajes de: width: 33,33333333333334%;

Código CSS:

.imagen-adaptable {
  display: block;
  height: auto;
  max-width: 100%;
}
 

Suerte.

[guichogdl]

Gracias por responder, olvide comentar que despues del div padre "mi_div" cada imagen esta dentro de un div, asi

Código HTML:

<div id="mi_div">
   <div><img src="xxx" /></div>
   <div><img src="xxx" /></div>
   <div><img src="xxx" /></div>
</div>
 

Eh podido resolver mi problema de la siguiente manera:

Código CSS:

@media only screen and (max-width: 1024px) {
 
#mi_div {
  width: 100%;
}
 
#mi_div div {
  float: left;
  width: 33.3333%; 
}
 
#mi_div div img {
  width: auto;
}
 
}
 
@media only screen and (max-width: 320px) {
 
#mi_div div {
  float: left;
  width: 100%;
}
 
#mi_div div img {
  width: 320px;
}
 
}
 

Agregue media query porque necesito que en la resolución de 320 si bajen las imagenes para que no se vean tan pequeñas.

Saludos! :D

[pzin]

¿El números de imágenes a mostrar es variable?

Iniciado por Pelipe

Esta seria para una imagen adaptable y para que se mantengan las 3 imagenes creas columnas con porcentajes de: width: 33,33333333333334%;

Código CSS:

.imagen-adaptable {
  display: block;
  height: auto;
  max-width: 100%;
}
 

En realidad sobran dos reglas, valdría con:

Código CSS:

.imagen_adaptable {
  width: 100%;
}
 

Ya que la altura por defecto es auto en todos los elementos y no hace falta que sea un elemento de bloque. Además, con especificar que el ancho sea de 100%, ya es suficiente. Si necesita que se adapte, no tiene sentido poner un ancho máximo y obviar el ancho.