¿Como adaptar imagen en diferentes pantallas?

[kenjork]

Muy buenas a todos, necesito una ayuda, me gustaría que me indiquen porfavor, como puedo hacer esto:

http://hipstafood.com/

Lo que necesito es la imagen inicial, si ven se adapta en diferente pantalla sin deformar.


Claro mi idea es comenzar haciendo fondo estático luego pasar a ser un slider, porfavor tomar en cuenta eso.

Espero su respuestas.

Gracias

[NueveReinas]

Te armé un JSFiddle, espero que te sirva: https://jsfiddle.net/sehfyvsh/

[kenjork]

Hola no sabes cuanto te agradezco por la ayuda, comprendí la única forma de hacer es con Jquery. Gracias totales, solo tengo un duda si en el caso ya no fuera una imagen de fondo si no un Slider o carrusel que pase la imagen ¿Uso el mismo método?

Iniciado por NueveReinas

Te armé un JSFiddle, espero que te sirva: [url]https://jsfiddle.net/sehfyvsh/[/url]

[siddartha23]

Para empezar tienes que tener en cuenta que el código que te han pasado solo sirve para que un contenedor tenga el alto de la pantalla, luego aprovechas ese contenedor y usas la imagen como fondo, el fondo no se va deformar por que es lo suficientemente grande y esta colocado al centro. El problema de esa solución es que si la pantalla es muy pequeña el contenido va desbordar por que el contenedor tiene un alto fijo, tendrías que prever eso. Mi sugerencia es que si solo vas a usar la imagen como fondo aproveches las propiedades css junto con media querys y listo.

Ahora, el problema es que tú quieres usar imágenes, por decir, "estáticas". Las imágenes dentro de la etiqueta <img> se adaptan a su entorno y si quieres "cortarlas" tienes que recurrir a la propiedad overflow para esconder el restante de imagen, aún así no te va ser tan simple tenerlas siempre centradas a menos que uses trucos como el posicionamiento absoluto o márgenes negativos.

Mas difícil aún si lo que quieres adaptar son imágenes que rotan dentro de un slider, los cuales de entrada para funcionar bien calculan el espacio en el que se van a mostrar.

Dicho esto veo mas factible hacer lo que quieres con imágenes de fondo, a la vez que es mas practico y funcional para un "elemento de adorno"

[caricatos]

Hola:

Iniciado por kenjork

...la única forma de hacer es con Jquery.
...

Todo lo que se puede hacer con jQuery, puede hacerse sin jQuery...
Solo javascript, y muchas veces sin...

Las dimensiones de las imágenes pueden establecerse con porcentajes también...
Para evitar que una imagen se deforme, muchas veces es conveniente usar solo una de las dimensiones (anchura o altura... width o height)

Aunque no termino de comprender el problema.

Saludos