Foros del Web » Creando para Internet » CSS »

Flexbox.Como redimensionar imagenes

Estas en el tema de Flexbox.Como redimensionar imagenes en el foro de CSS en Foros del Web. Buenas. Estoy usando flexbox para el layout de una pagina. El problema que tengo es que tengo 2 cajas: un aside, que ocupa un 30% ...
  #1 (permalink)  
Antiguo 13/04/2016, 16:29
 
Fecha de Ingreso: marzo-2016
Mensajes: 3
Antigüedad: 8 años, 1 mes
Puntos: 0
Flexbox.Como redimensionar imagenes

Buenas. Estoy usando flexbox para el layout de una pagina. El problema que tengo es que tengo 2 cajas: un aside, que ocupa un 30% de pagina, con imagenes en columna, y el 70% restante el content, con texto e imagenes. El problema es que al redimensionar las imagenes empiezan a reducirse como es normal. Pero al reducir mas el contenido se descuadra todo,en vez de reducir mas su tamaño.

no se como hacer para que no se descuadre del ancho del body y que no se superpongan las cajas, sino que se reduzca lo necesario para mantener la posicion.

Código:
.contenedor
{
	margin-top: 5px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: flex-start;
	
}

.aside
{
	
	
	max-width: 30%;
	
	
}
.content
{
	margin: 1px 2px;
	max-width: 70%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: space-around;
	max-height: 740px;
	
	
		
}
article
{
	max-width: 48%;
	
}
  #2 (permalink)  
Antiguo 20/04/2016, 05:05
 
Fecha de Ingreso: abril-2016
Ubicación: Valencia
Mensajes: 17
Antigüedad: 8 años
Puntos: 1
Respuesta: Flexbox.Como redimensionar imagenes

No entiendo muy bien el problema que tienes. Las img las tienes con width=100%. Solo hay un articulo en la página de la que hablas?
Si pones varias imagenes con texto dentro de etiquetas <div> o <article> lo suyo es indicar en los estilos el flex-wrap: wrap; Para hacer que las cajas bajen a una fila inferior en vez de ocupar todas el mismo ancho que es el comportamiento por defecto display:flex

http://www.w3w3b.com/blog/noticia/maquetaci%C3%B3n-web-responsive-sin-frameworks-ni-jquery-parte-ii

Ahí tengo un ejemplo del uso del flex-wrap:wrap

Espero ser de ayuda.

Etiquetas: imagenes, redimensionar, todo, width
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 00:07.