[SOLUCIONADO] Como adaptar imágenes con Responsive Design

[anthony9564]

Tengo 3 imágenes

1° Imagen tiene un tamaño de: 1200 x 18

2° Imagen tiene un tamaño de: 325 x 64

3° Imagen tiene un tamaño de: 330 x 112

Como adaptar esas 3 imágenes a distintos tamaños de pantalla con Responsive Design a través de CSS con @media

Que pueda entrar desde un Smartphone, Tablet o PC de Escritorio y se visualice perfectamente.

Gracias a todos los que respondan

[pzin]

Es un poco escueta la pregunta.

Si lo que necesitas es que esas imágenes no se salgan de la pantalla, podrías hacer algo así:

Código CSS:

img {
  max-width: 100%;
}
 

[anthony9564]

osea que las imágenes se puedan ver en cualquier pantalla perfectamente se adapte la imagen al tamaño de pantalla del equipo. He Probado esa pero las imágenes cuando hay un tamaño mas pequeño se recogen. Ejemplo Un Rectángulo de 1200px de largo x 18px de alto dentro de ese rectángulo hay un texto que dice Bienvenidos cuando voy reduciendo la ventana del navegador se van escogiendo y no se entiende nada. El Rectángulo y el texto esta como una imagen.


Ayudaaa

[C2am]

Es toda una cuestión de estudio y debate el de las imágenes "responsivas".

Una forma es servir diferentes imagenes para diferentes resoluciones.

Claro, teniendo en cuenta ciertos intervalos, por ejemplo una imagen para pantallas de hasta 350px, otra para hasta 800px, y otra para todo lo superior a 800px. (es un ejemplo, debes estudiar mejor los puntos de "quiebre" o intervalos).
Por supuesto que para esto debes además hacerlo con algo de programación del lado de servidor.

Un link de interes sobre el tema: http://blog.cloudfour.com/8-guidelin...onsive-images/

Ahora, ¿una imagen para un texto?, tal vez deberías repensar eso, aunque es sólo una alternativa. Digo, cuan importante puede ser un texto sí este es una imagen?

Algo que encontré pero que no probe: http://adaptive-images.com/