Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Responsive a 3 imagenes en linea dentro de un div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/01/2014, 10:39
Avatar de guichogdl  
Fecha de Ingreso: abril-2010
Ubicación: gdl
Mensajes: 131
Antigüedad: 14 años
Puntos: 1
Pregunta Responsive a 3 imagenes en linea dentro de un div

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:
Ver original
  1. <div id="mi_div">
  2.     <img src="xxx" />
  3.     <img src="xxx" />
  4.     <img src="xxx" />
  5. </div>

css

Código CSS:
Ver original
  1. #mi_div {
  2.   margin: 0 auto;
  3.   width: 900px;
  4. }
  5.  
  6. #mi_div img {
  7.   max-width: 300px;
  8.   width: auto;
  9. }


*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
  #2 (permalink)  
Antiguo 29/01/2014, 11:10
Avatar de Pelipe  
Fecha de Ingreso: abril-2011
Ubicación: Nuestra Señora de La Paz
Mensajes: 90
Antigüedad: 13 años
Puntos: 4
De acuerdo Respuesta: Responsive a 3 imagenes en linea dentro de un div

Cita:
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:
Ver original
  1. .imagen-adaptable {
  2.   display: block;
  3.   height: auto;
  4.   max-width: 100%;
  5. }

Suerte.
  #3 (permalink)  
Antiguo 29/01/2014, 11:47
Avatar de guichogdl  
Fecha de Ingreso: abril-2010
Ubicación: gdl
Mensajes: 131
Antigüedad: 14 años
Puntos: 1
Respuesta: Responsive a 3 imagenes en linea dentro de un div

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

Código HTML:
Ver original
  1. <div id="mi_div">
  2.    <div><img src="xxx" /></div>
  3.    <div><img src="xxx" /></div>
  4.    <div><img src="xxx" /></div>
  5. </div>

Eh podido resolver mi problema de la siguiente manera:

Código CSS:
Ver original
  1. @media only screen and (max-width: 1024px) {
  2.  
  3. #mi_div {
  4.   width: 100%;
  5. }
  6.  
  7. #mi_div div {
  8.   float: left;
  9.   width: 33.3333%;
  10. }
  11.  
  12. #mi_div div img {
  13.   width: auto;
  14. }
  15.  
  16. }
  17.  
  18. @media only screen and (max-width: 320px) {
  19.  
  20. #mi_div div {
  21.   float: left;
  22.   width: 100%;
  23. }
  24.  
  25. #mi_div div img {
  26.   width: 320px;
  27. }
  28.  
  29. }

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
  #4 (permalink)  
Antiguo 29/01/2014, 11:49
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Responsive a 3 imagenes en linea dentro de un div

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

Cita:
Iniciado por Pelipe Ver Mensaje
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:
Ver original
  1. .imagen-adaptable {
  2.   display: block;
  3.   height: auto;
  4.   max-width: 100%;
  5. }
En realidad sobran dos reglas, valdría con:

Código CSS:
Ver original
  1. .imagen_adaptable {
  2.   width: 100%;
  3. }

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.

Etiquetas: adaptable, imagenes, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:01.