Tengo que renderizar imágenes de cualquier tamaño en un contenedor que es el 90 por ciento de la ventana gráfica. La ventana gráfica también puede tener cualquier tamaño, móvil, tableta, computadora de escritorio, paisaje, retrato, etc. Tengo que representar la imagen en el contenedor manteniendo la relación de aspecto pero que quepa en el contenedor, es decir. la altura o el ancho de la imagen serán los mismos que los del contenedor.
La solución debe ser
Probé el siguiente código simple, pero no entiendo por qué el ajuste de objeto de entrada CSS no funciona y por qué la imagen está fuera del contenedor en el lado derecho e inferior si el contenedor es más pequeño que la imagen:
<!DOCTYPE html> <html> <head> <style> .container { position: fixed; top: 5vh; left: 5vw; width: 90vw; height: 90vh; } img { object-fit: contain; margin: auto; display: block; } </style> </head> <body> <div class="container"> <img src="https://www.diet-health.info/images/recipes/1400/salatgurke-schlangengurke-cucumber-by-rasbak-at-dutch-wikipedia.jpg"> </div> </body> </html>Eche un vistazo al atributo CSS3 aspect-ratio aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
Creo que este podría ser un buen punto de partida:
<!DOCTYPE html> <html> <head> <style> .container { position: fixed; top: 5vw; left: 5vw; width: 90vw; height: 90vh; } img { object-fit: contain; margin: auto; width: 100%; aspect-ratio: 16/9; } </style> </head> <body> <div class="container"> <img src="https://www.diet-health.info/images/recipes/1400/salatgurke-schlangengurke-cucumber-by-rasbak-at-dutch-wikipedia.jpg" /> SEE: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio </div> </body> </html>