• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

109
Vistas
¿Cómo renderizar una imagen receptiva en cualquier ventana manteniendo la relación de aspecto?

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

  • ligero, no se puede usar bootstrap ni jQuery (zepto.js está bien)
  • no se puede usar ninguna imagen de fondo css, porque todas las imágenes tienen una versión jpg y webp y en la página real se usará la estructura HTML picture-source-img en lugar de la etiqueta img
  • independiente del tamaño de la imagen y el tamaño de la ventana gráfica, es decir. totalmente receptivo

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>
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda