Actualmente estoy trabajando en una página de destino móvil para una empresa. Es un diseño realmente básico, pero debajo del encabezado hay una imagen de un producto que siempre tendrá un ancho del 100% (el diseño muestra que siempre va de borde a borde). Dependiendo del ancho de la pantalla, la altura de la imagen obviamente se ajustará en consecuencia. Originalmente hice esto con un img (con un ancho de CSS del 100%) y funcionó muy bien, pero me di cuenta de que me gustaría usar las consultas de los medios de comunicación para servir diferentes imágenes basadas en diferentes resoluciones. Una versión grande de la misma imagen, por ejemplo. Sé que no puedes cambiar el img src con CSS, así que pensé que debería usar un fondo CSS para la imagen en lugar de una etiqueta img en el HTML.

Parece que no puedo hacer que esto funcione correctamente, ya que la división con la imagen de fondo necesita un ancho y una altura para mostrar el fondo. Obviamente puedo usar 'ancho: 100%' pero ¿qué uso para la altura? Puedo poner una altura fija aleatoria como 150px y luego puedo ver las 150px superiores de la imagen, pero esta no es la solución ya que no hay una altura fija. Tuve una jugada y descubrí que una vez que hay una altura (probada con 150px) puedo usar 'background-size: 100%' para ajustar la imagen en la división correctamente. Puedo usar el CSS3 más reciente para este proyecto, ya que está dirigido únicamente a dispositivos móviles.

He añadido un ejemplo aproximado a continuación. Disculpe los estilos en línea, pero quería dar un ejemplo básico para intentar aclarar un poco mi pregunta.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

¿Es posible que tenga que darle a la división de contenedores una altura porcentual basada en toda la página o lo estoy viendo completamente mal?

Además, ¿crees que los fondos CSS son la mejor manera de hacer esto? Tal vez haya una técnica que sirva diferentes etiquetas img según el ancho del dispositivo / pantalla. La idea general es que la plantilla de la página de destino se usará varias veces con diferentes imágenes de productos, por lo que debo asegurarme de que se desarrolle de la mejor manera posible.

Pido disculpas si esto es un poco largo, pero estoy yendo y viniendo de este proyecto al siguiente, así que me gustaría terminar con esta pequeña cosa. Gracias de antemano por su tiempo, es muy apreciado. Saludos