Redimensionar imagens de acordo com a tela

Olá pessoal tudo bem? Gostaria de saber como eu adapto meu site para diferentes tamanhos de tela, incluindo as minhas imagens. Pois criei um site "Doces Maria Mole" e nele há um slider, que fica passando imagens dos produtos, porém, elas possuem 1000px X 500px

Isso fica gigante em aparelhos celulares.. Para redimensionar fontes ou divs eu consigo usar isso no css:

@media screen and (min-width:360px){
#container{ font-size:70%;}
}

@media screen and (min-width:613px){
#container{ font-size:80%;}
}

@media screen and (min-width:773px){
#container{ font-size:90%;}
}

@media screen and (min-width:997px){
#container{ font-size:100%;}
}

porém, para imagens não consigo..

<img src="slider/<?php echo $imagem; ?>" width="1000" height="500" alt="<?php echo $nome; ?>" />

tentei até fazer com que o width e o height fossem variaveis para poderem se adaptar dinamicamente

<?php
$tamanho997W = '1000';
$tamanho997H = '500';

?>

 <img src="slider/<?php echo $imagem; ?>" width="<?php echo $tamanho997W; ?>" height="<?php echo $tamanho997H; ?>" alt="<?php echo $nome; ?>" />

Mas não sei como prosseguir com isso.. Quem souber continuar, ou tiver outros métodos, por favor compartilhem aqui.. Obrigado!