画像の大きさ変更の起点を中央に移すには

input[type="range"]で、valueを変えると、画像の大きさを変える仕様にしているのですが、今のままのスタイルでは不格好です。

実際に画像の大きさを変えてみると、画像は左下から大きくなっているのですが、この起点をずらすことはできるのでしょうか？

cssのdisplayやmarginプロパティを使ってみましたが、実現できませんでした。ググっても、それといった情報は得られなかったので、質問させていただきました。

どなたか詳しい方、よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <link rel="stylesheet" href="css/styles.css">
6  <title>練習実験</title>
7</head>
8<body>
9  <div id="container">
10    <div class="block"><img src="cheese.jpg" width="100px">
11    <p id="output">100</p>
12    <input type="range"
13           id="slider"
14           value="100"
15           min="0"
16           max="300"
17           data-number="0"
18           >
19  </div>
20
21
22
23
24  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
25  <script>
26    $(window).on('load', function() {
27      $("input[type='range']").on('input', function() {
28        var val = $(this).val();
29        var slider = $(this);
30        $(this).attr("data-number", val);
31        $('p').text(parseInt(slider.attr("data-number")));
32        $('img').width(parseInt(slider.attr("data-number")));
33
34      });
35    });
36  </script>
37</body>
38</html>

css
1body {
2  font-family: 'Yu Gothic';
3  font-size: 16px;
4}
5
6#container {
7  margin: 50px auto;
8  width: 500px;
9}
10
11
12#output {
13  background: #666666;
14  text-align: center;
15  color: white;
16}
17
18input[type="range"] {
19  -webkit-appearance: none;
20  appearance: none;
21  background-color: #c7c7c7;
22  height: 2px;
23  width: 100%;
24
25  &:focus,
26  &:active {
27    outline: none;
28  }
29}
30
31input[type="range"]::-webkit-slider-thumb {
32    -webkit-appearance: none;
33    appearance: none;
34    cursor: pointer;
35    position: relative;
36    border: none;
37    width: 12px;
38    height: 12px;
39    display: block;
40    background-color: #262626;
41    border-radius: 50%;
42    -webkit-border-radius: 50%;
43  }
44}