ajustar imagen al body

azaz · #1 (**permalink**) 20/08/2018, 07:47

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<html>
<head>
body{
    position:fixed;
    width:100%;
    height:100%; 
    max-width:1200px;
}
img{
    width:100%; 
    height:auto;
}
img:
</head>
<body>
<img src='miImagen.jpg'>
</body>
</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.

ArturoGallegos · #2 (**permalink**) 20/08/2018, 09:02

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.

azaz · #3 (**permalink**) 20/08/2018, 09:25

Cita:

Iniciado por ArturoGallegos

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

frankm · #4 (**permalink**) 21/08/2018, 09:21

Hola,

Otra alternativa a javascript también sería optar por media query, todo sería a nivel de CSS.

Triby · #5 (**permalink**) 22/08/2018, 14:16

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;

Ivanaruto · #6 (**permalink**) 31/08/2018, 23:33

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 .

Rafael · #7 (**permalink**) 18/12/2018, 03:18

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.