Imagenes sobresalen el div

[Viturbiko]

Hola.

Estoy intentando hacer una web y tengo el siguiente problema:

Tengo esta distribucion a pantalla completa:



La cuestión es que cuando redimensiono en horizontal (la verdad es que en vertical la proporción se mantiene bastante bien) ocurre lo siguiente:



Teniendo en cuenta que todo está contenido en el div rosa y en el CSS todo son proporciones, no entiendo porque las imágenes acaban sobresaliendo del mencionado div rosa. Tengo un jquery llamado textFit que hace que el texto se vaya adaptando a la pantalla, pero parece funcionar más teniendo en cuenta el ancho que el alto, pues hacer más pequeño el navegador en horizontal el tamaño del texto no cambia... ¿Cómo puede hacerse responsive el texto en vertical, teniendo en cuenta que las queries suelen medirse en ancho y no en largo?

¿Alguna solución? Pego el código por si sirve de ayuda:

Código HTML:

<section id="servicios">

		<h2 class="titulo">SERVICIOS</h2>

		<p class="descripcion" id="textoServicios"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias obcaecati odio libero impedit ut sunt iusto ipsum earum asperiores, veritatis beatae quod! Laborum delectus assumenda dolor, dolore ipsa maiores ad.</span>

		<div class="serviciosImagenes">

			<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
			<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
			<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">

		</div>

		<div class="serviciosTextos">
			<h4>SERVICIO</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
			<h4>SERVICIO</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
			<h4>SERVICIO</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
		</div>

		<div class="serviciosImagenes2">

			<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
			<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">
			<img src="img/cajaroja.png" class="serviciosImagen" id="cajaroja">

		</div>

		<div class="serviciosTextos2">
			<h4>SERVICIO</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
			<h4>SERVICIO</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
			<h4>SERVICIO</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus ab, dolor quos aperiam atque! Ad possimus consequuntur, dolor inventore! Blanditiis incidunt excepturi magnam minus illum quos, voluptate, commodi porro voluptatibus.</p>
		</div>
		
	</section> 

Código:

/*SERVICIOS*/

#servicios {
	background-color: pink;
	width:100%;
	height:100%;
}

.serviciosImagenes {
	width:61.7%;
	height:30%;
	clear:none;
	display:inline-block;
	float:left;
}

.serviciosImagenes2 {
	width:61.7%;
	height:30%;
	float:right;
	margin-top: 3%;
}

.serviciosImagen {
	background: url(../img/cajaroja.png);
	max-width: 100%;
	max-height: 100%;
	width: 25%;
	height: 100%;
	float:left;
	margin-left: 6%;
}

.serviciosTextos {
	float:left;
	width:30%;
	height:30%;
}

.serviciosTextos2 {
	float:left;
	width:30%;
	height:30%;
	margin-left: 4%;
	margin-top: 2%;
}

Gracias y un saludo.

[fede5426]

Veo que tenes todo flotado dentro del contenedor.. proba poniendo overflow:hidden; a #servicios.


Edito:

Recién veo que tenes un height 100% en #servicios, eso puede estar causando el problema. Si colocas el overflow hidden, teniendo 100% en height te va a cortar el contenido porque sobrepasa de ese 100%. El alto de 100% lo toma del tamaño que tiene el dispositivo al entrar al sitio, si después modificas el tamaño de la ventana, el contenedor va a seguir con su medida inicial, por eso el contenido queda por fuera..

[Viturbiko]

Gracias por tu ayuda, pero el problema no se soluciona completamente, pues lo que hace es ocultar los objetos, y yo quería redimensionarlos para que se adaptasen a la nueva resolución de pantalla.

He estado pensando algo que no se me había ocurrido y que creo que podría solucionar el problema, y es simplemente establecer un min-height fijo en píxeles para ese div en concreto. La verdad es que no creo que nadie consulte una pagina (es completamente inviable) en un alto menor de 700px, por lo que le he establecido un min-height de 700px, y cuando llega a esa altura deja de redimensionarse. Una cosa es que intente hacer una web responsive y otra es que se vea bien en una resolucion de 1680x50.

Gracias y un saludo.