tarayıcıya göre resmi boyutlandırma

selam,

Sayfanın tam ortasına yerleştirilmiş bir resmi pencere boyutuna göre boyutlandırmak istiyorum. Yani pencere küçüldükçe resimde ona göre küçülmesi gerekiyor. css responsive deniliyor galiba bu olaya bunun ile ilgili bildiğiniz bir kod mevcut mu?

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  img {width:100%;height:100%;}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  img {width:100%;height:100%;}
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
  img {width:100%;height:100%;}
}

@media only screen and (max-width: 320px) {
  img {width:100%;height:100%;}
}

teşekkürler peki resim yolunu ne şekilde belirtmem gerekiyor bu şekilde direk eklemem sanırsam iş görmez örnek ortaresim.png şeklinde bir resim dosyam var diyelim.

Direk resmi html kısımda ekleyeceksiniz isterseniz bir class içine yerleştirip daha sonrasında class adını girip içindeki resim diyebilirsiniz.