Nota Esta podría ser una respuesta, como tampoco la podría ser, difícil al no visualizar el código de su proyecto. Pero comentar estas opciones no alcanzaría para comentarlo.
Yo por ejemplo en los Slider para que se adapten sin problemas y con el resto de imágenes utilizo este estilo css.
max-width: 100%; height: auto;
Puedes utilizarlo según donde prefieres conveniente.
Ejemplo
img {
max-width: 100%;
height: auto;
}
//Esta opción si la imagen se encuentra en un elemento u otro.
ul li {
max-width: 100%;
height: auto;
}
Existen otras opciones, pero para ello necesito ver el código.
por ejemplo esta otra opción:
Nota: Para esta segunda opción la imagen debe cargarse mediante background-image: url();
y no como se lo realiza normalmente <img src="">
//Aplicar es estilo al contenedor de la imagen {
height: 558px;
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
Actualización
Existen dos formas para no perder la calidad de la imagen.
La primera nuestro amigo Shaz lo comento en un comentario editar la imagen con las dimensiones máximas a mostrar.
La segunda opción es posicionar la imagen ocultando ciertas partes de la imagen con estilos css:
Descargue los archivos este estilo lo adapte a la imagen a la cual tienes el inconveniente.
Ejemplo:
#image {
height: 500px;
max-width: 100%;
}
#image {
background-image:url(http://www.imgbase.info/images/safe-wallpapers/photography/winter/11288_winter.jpg);
background-repeat: no-repeat;
background-position: 0% 75%;
background-size: cover;
}
<div id="image"></div>
Manipula las posiciones que se vea mejor cambiando los valores(75%) de background-position: 0% 75%;
.
Recomendaciones
Debes evitar en los nombres de las imágenes espacios(escuela clase.jpeg) en vez de espacios en blanco (escuela-clase.jpeg) de igual manera en las carpetas.
object-fit: cover
, tal vez te ayude.