Atualmente estou trabalhando em uma página de destino para celular de uma empresa. É um layout realmente básico, mas abaixo do cabeçalho há uma imagem de um produto que sempre terá 100% de largura (o desenho mostra que ele sempre vai de ponta a ponta). Dependendo da largura da tela, a altura da imagem obviamente será ajustada de acordo. Originalmente fiz isso com um img (com uma largura de CSS de 100%) e funcionou muito bem, mas percebi que gostaria de usar consultas de mídia para servir imagens diferentes com base em diferentes resoluções - digamos, um pequeno, médio e uma versão grande da mesma imagem, por exemplo. Eu sei que você não pode alterar o img src com CSS, então imaginei que deveria estar usando um plano de fundo CSS para a imagem, em oposição a uma tag img no HTML.

Eu não consigo fazer isso funcionar corretamente, pois o div com a imagem de plano de fundo precisa de largura e altura para mostrar o plano de fundo. Eu obviamente posso usar 'width: 100%' mas o que eu uso para a altura? Eu posso colocar uma altura fixa aleatória como 150px e então eu posso ver o top 150px da imagem, mas esta não é a solução, pois não há uma altura fixa. Eu tive um jogo e descobri que uma vez que há uma altura (testado com 150px) eu posso usar 'background-size: 100%' para ajustar a imagem no div corretamente. Eu posso usar o CSS3 mais recente para este projeto, pois ele é voltado exclusivamente para dispositivos móveis.

Eu adicionei um exemplo aproximado abaixo. Por favor, desculpe os estilos inline, mas eu queria dar um exemplo básico para tentar fazer a minha pergunta um pouco mais clara.

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

Eu talvez tenha que dar ao div do recipiente uma porcentagem de altura com base na página inteira ou estou olhando para isso completamente errado?

Além disso, você acha que as origens de CSS são a melhor maneira de fazer isso? Talvez exista uma técnica que serve tags img diferentes com base na largura do dispositivo / tela. A ideia geral é que o modelo da página de destino será usado várias vezes com imagens de produtos diferentes, portanto, preciso ter certeza de que desenvolvo isso da melhor maneira possível.

Peço desculpas, isso é um pouco prolixo, mas estou indo e voltando desse projeto para o próximo, então eu gostaria de fazer essa pequena coisa. Agradecemos antecipadamente pelo seu tempo, é muito apreciado. Saudações