3

Buenas a todos y a todas.

Estoy realizando una web para una autoescuela, en la cual voy a incluir un slider de imágenes en la página de inicio.

Para ello, he usado el slider que hay en w3 (con sus estilos etc).

Mi idea, es que las imágenes estén al 100% de ancho, pero que el alto sea por ejemplo como máximo de 600px o 700px. Quiero además, que las imágenes no pierdan calidad de visualización. (Digamos que sean imágenes que automáticamente se adapten)

Captura de un ejemplo:

introducir la descripción de la imagen aquí

Actualmente tengo el height puesto como auto:

introducir la descripción de la imagen aquí

Esto es lo que ocurre si fuerzo a que las imágenes tengan 500px de alto:

introducir la descripción de la imagen aquí

Adjunto el enlace al proyecto (perdonad las molestias pero tengo varios archivos). Así se puede visualizar todo.

Enlace al proyecto en Google Drive

Gracias por la ayuda.

5
  • 1
    Agrega el código relevante en tu pregunta, de modo que las personas que puedan ayudarte no tengan que salir del sitio o descargar archivos desconocidos. Y también investiga esto: object-fit: cover, tal vez te ayude.
    – toledano
    el 25 ago. 2016 a las 18:19
  • @ramonguardia podrías publicar el código aquí https://jsfiddle.net/ para así poder visualizar el código para así poder dar con una respuesta correcta. Publicas todo el código donde corresponde luego lo ejecutas Run y lo guardas Save no necesitas registrarte, copias la Url y la publicas, para ende así poder visualizar el código.
    – Otto
    el 25 ago. 2016 a las 18:21
  • El problema de publicar el código ahí es que uso varios archivos, porque mi web es dinámica. Tengo 3 archivos php y 2 css actualmente. Si en esa web se pueden adjuntar varios archivos, entonces lo hago. el 25 ago. 2016 a las 18:25
  • Teóricamente la única forma para que no "pierda calidad" es que la imagen sea de las dimensiones máximas a las que se va a mostrar.
    – Shaz
    el 25 ago. 2016 a las 18:27
  • Con esto @Shaz, quieres decirme que si quiero hacer la imagen más pequeña, tendría que usar un editor gráfico, ¿verdad? el 25 ago. 2016 a las 18:30

1 respuesta 1

4

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.

4
  • Puedes descargar el proyecto entero, que he pasado el enlace. PD: voy a comprobarlo. Gracias. el 26 ago. 2016 a las 16:34
  • @ramonguardia descargue los archivos del proyecto, edite mi respuesta con dos soluciones a tu problema, la segunda opción esta adaptada a la imagen del proyecto, remplaza la url de la imagen por la imagen del proyecto background-image:url();. Nota importante: Elimina los espacios blanco en las imágenes y carpetas, caso contrario no cargara la imagen saludos :)
    – Otto
    el 26 ago. 2016 a las 18:31
  • Perfecto. Funciona a las mil maravillas y es lo que quería. Mil gracias. el 26 ago. 2016 a las 20:03
  • @ramonguardia de nada :) no te olvides marcar la respuesta como aceptada en el visto de la respuesta, para cerrar la pregunta como solucionada saludos.
    – Otto
    el 26 ago. 2016 a las 20:09

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.