Foros del Web » Creando para Internet » CSS »

ajustar imagen al body

Estas en el tema de ajustar imagen al body en el foro de CSS en Foros del Web. Como se debe hacer para ajustar una imagen al cuerpo del documento sin que se deforme. intente de esta forma. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver ...
  #1 (permalink)  
Antiguo 20/08/2018, 07:47
 
Fecha de Ingreso: enero-2011
Mensajes: 1.150
Antigüedad: 13 años, 5 meses
Puntos: 10
ajustar imagen al body

Como se debe hacer para ajustar una imagen al cuerpo del documento sin que se deforme. intente de esta forma.

Código HTML:
Ver original
  1. body{
  2.     position:fixed;
  3.     width:100%;
  4.     height:100%;
  5.     max-width:1200px;
  6. }
  7. img{
  8.     width:100%;
  9.     height:auto;
  10. }
  11. img:
  12. </head>
  13. <img src='miImagen.jpg'>
  14. </body>
  15. </html>


de esta forma el problema lo tengo que si el ancho del dispositivo es mayor que la altura, la altura de la imagen no se ve, en este caso tendria que cambiar el width y height de la imagen.
Lo que pretendo es mostrar la imagen en proporcion aprovechando el ancho o alto del dispositivo.
  #2 (permalink)  
Antiguo 20/08/2018, 09:02
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 3 meses
Puntos: 1146
Respuesta: ajustar imagen al body

Tendras que recurrir a javascript para leer el ancho y alto de dicha imagen, de esa forma podras aplicar los estilos en consecuencia.

Directamente con CSS no conozco forma en que puedas aplicar estilos segun la orientacion de la imagen.
  #3 (permalink)  
Antiguo 20/08/2018, 09:25
 
Fecha de Ingreso: enero-2011
Mensajes: 1.150
Antigüedad: 13 años, 5 meses
Puntos: 10
Respuesta: ajustar imagen al body

Cita:
Iniciado por ArturoGallegos Ver Mensaje
Tendras que recurrir a javascript para leer el ancho y alto de dicha imagen, de esa forma podras aplicar los estilos en consecuencia.

Directamente con CSS no conozco forma en que puedas aplicar estilos segun la orientacion de la imagen.
Hola, gracias por ayudar.
En realidad no necesito la orientación de la imagen si no de la pantalla.

no se si se entiende mi problema?

de todas formas estas en lo cierto y creo que se necesita javascript, gracias
  #4 (permalink)  
Antiguo 21/08/2018, 09:21
 
Fecha de Ingreso: julio-2008
Mensajes: 253
Antigüedad: 15 años, 10 meses
Puntos: 11
Respuesta: ajustar imagen al body

Hola,

Otra alternativa a javascript también sería optar por media query, todo sería a nivel de CSS.
__________________
Neothek.com | Web hosting, registro de dominios, Diseño Web y Certificados SSL
  #5 (permalink)  
Antiguo 22/08/2018, 14:16
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 10 meses
Puntos: 2237
Respuesta: ajustar imagen al body

Y necesitas que sea imagen o sirve también si la usas como fondo? Si es el caso, puedes ver las opciones para posición y tamaño de fondo, por ejemplo: background-size: cover;
__________________
- León, Guanajuato
- GV-Foto
  #6 (permalink)  
Antiguo 31/08/2018, 23:33
Avatar de Ivanaruto  
Fecha de Ingreso: agosto-2013
Ubicación: Buenos Aires
Mensajes: 12
Antigüedad: 10 años, 9 meses
Puntos: 2
Respuesta: ajustar imagen al body

Yo podria recomendarte que si lo que buscas es mostrar esa imagen por ejemplo en moviles directamente modifiques tu css para los moviles y probar desde ahi..hoy en dia son muchas funciones que se pueden poner para la visualizacion en moviles porque si lo que pretendes es mostrar de largo y ancho por ejemplo una imagen de 1200 px a un dispositivo de 100px(ej) es practicamente imposible..una cosa es una miniatura bien dicho el nombre pero si prestas atencion mismos estas miniaturas son de un tamaño promedio mayores a la resolucion de cualquier movil no se si me explico..Igualmente prueba a modificar tu css para moviles si lo que quieres es dejar un bg en fixed,hace 8 años trabajo con css..Saludos no busco desalentarte a nada pero espero que mi comentario te aclare algunas dudas..

EDITO: Puedes probar min-width y min-height siendo min-height el alto de tu imagen aunque se veria el scroll si superara por mucho la diferencia entre resoluciones...y yo generalmente para evitar deformaciones en mi trabajo siempre creo un DIV contenedor llamado wrapper o lo que quieres ponerle siendo width .height auto auto y los margin y padding a 0 (para evitar esto de resoluciones minimas y maximas en toda la pagina)

Aun asi si es css te podria ayudar si pones imagenes y que que especificamente lo que intentas lograr .

Última edición por Ivanaruto; 31/08/2018 a las 23:40
  #7 (permalink)  
Antiguo 18/12/2018, 03:18
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 3 meses
Puntos: 1826
Respuesta: ajustar imagen al body

No entiendo muy bien el problema.

Pero las opciones a explorar son:
- bacground-size como dice Triby prueba con cover o contain sea lo que sea que busques.

- min-width y min-height como dice Ivanaruto pero puede ser que sea al revés max-width y max-height. Es ahí donde no entiendo bien.

En combinación con estos dos podrías usar with: 100% o 100vw como unidad, eso depende de lo que requieras.

Etiquetas: body
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:40.