Utilizamos cookies propias y de terceros. Al navegar entendemos que aceptas el uso de cookies. +Info.
Política de cookies
Proyecto AjpdSoft

· Inicio
· Buscar
· Contactar
· Cookies
· Descargas
· Foros
· Historia
· Nosotros
· Temas
· Top 10
· Trucos
· Tutoriales
· Usuario
· Wiki

Proyecto AjpdSoft: Foros

AjpdSoft :: Ver tema - Cómo mostrar imagen adaptativa en sitio web
Foros de discusión Buscar Perfil FAQ Iniciar sesión
Information Cómo mostrar imagen adaptativa en sitio web

Publicar nuevo tema Responder al tema
Foros de discusión » Varios (seguridad, internet, ofimática, errores)   
Ver tema anterior :: Ver tema siguiente
AutorMensaje
varios
Magnífico usuario


Registrado: Oct 10, 2006
Mensajes: 2092

Asunto: Cómo mostrar imagen adaptativa en sitio web Responder citando

Hola, no tengo conocimientos de HTML y necesito saber cómo poner una imagen que se adapte a la resolución de los móviles, tablets, PC, smartTV, etc. He visto web que al reducirlas en el navegador las imágenes se reducen automáticamente y al ampliarlo se amplían, y también salen adaptadas en los móviles, tanto Android, como iPhone como Windows Phone.

¿Cómo se hace esto?
MensajePublicado:
Mie Abr 15, 2015 9:05 pm
Top of PageVer perfil de usuario
alonsojpd
Administrador/Moderador


Registrado: Sep 16, 2003
Mensajes: 2687

Asunto: Re: Cómo mostrar imagen adaptativa en sitio web Responder citando



Anuncios



varios escribió:
Hola, no tengo conocimientos de HTML y necesito saber cómo poner una imagen que se adapte a la resolución de los móviles, tablets, PC, smartTV, etc. He visto web que al reducirlas en el navegador las imágenes se reducen automáticamente y al ampliarlo se amplían, y también salen adaptadas en los móviles, tanto Android, como iPhone como Windows Phone.

¿Cómo se hace esto?


Para hacer una imagen adaptativa puedes usar CSS, en tu fichero .css de hoja de estilos de tu web añades:

Código:

.imgno
{
    max-width: 100%; 
    height: auto;      
}


Y en el código HTML de tu página donde quieras mostrar la imagen adaptativa añadires:

Código:

<a href="http://www.ajpdsoft.com"><img class="imgno" src="themes/fiapple/images/logo.png" border="0" alt="$sitename"></a>
MensajePublicado:
Mie Abr 15, 2015 9:30 pm
Top of PageVer perfil de usuario
Mostrar mensajes de anteriores:   
Todas las horas son GMT - 1 Horas
Publicar nuevo tema Responder al tema
Foros de discusión » Varios (seguridad, internet, ofimática, errores)  

Cambiar a:  
Key
  Puede publicar nuevos temas en este foro
No puede responder a temas en este foro
No puede editar sus mensajes en este foro
No puede borrar sus mensajes en este foro
No puede votar en encuestas en este foro
Este sitio web NO CONTIENE malware, todos los programas con código fuente aquí. Autor: Alonso Javier Pérez Díaz Google+ Síguenos en Google+