imgタグにサイズ指定しつつレスポンシブ対応にしたい

【現状】
画面幅992px以上の時、画像の幅、高さが245pxで固定
画面幅768px以上991px以下の時、画像の最大幅170px、最大高さ175px、画面幅が小さくなると画像も小さくなる
画面幅767px以下の時、画像の最大幅134px、最大高さ145px、画面幅が小さくなると画像も小さくなる

【やりたいこと】
画面幅992px以上の時、画像の幅、高さが245pxで固定
画面幅768px以上991px以下の時、画像の最大幅、最大高さを300pxとし画面幅が小さくなると画像比率を保ったまま（真四角のまま）小さくなる
画面幅767px以下の時、画像の最大幅、最大高さを245pxとし画面幅が小さくなると画像比率を保ったまま（真四角のまま）小さくなる

<div class="image">
  <img src="img.jpg" width="245" height="245" alt="画像">
</div>

@media screen and (max-width: 991px){
  .image img{
    width: 300px;
    max-width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px){
  .image img{
    width: 245px;
    max-width: 100%;
    height: auto;
  }
}

現在模写コーディングをしている者です。
いくつか方法は試してみたものの画像指定がうまくいかず非常に悩んでおります。
何か良い解決策などあればご教示いただきたく
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

css
1.image img{
2  width: calc(245px + (100vw - 768px) * (300 - 245) / (992 - 768));
3  height: auto;
4}
5
6@media screen and (min-width: 992px){
7  .image img{
8    width: 245px;
9  }
10}