CSSレスポンシブ対応 position:absoluteで重ねた画像も縮小させたい

Question

メインビジュアルの画像（3枚をjQuaryでスライドショーにしています）の真ん中に、ロゴの画像を重ねています。画面を縮小していくとメインビジュアルの画像は縮小されていくのですが、ロゴは縮小されません。（head内にviewportは指定済です。）
メディアクエリで細かく対応しようと思ったのですが、今後もそうしていくのは現実的でないと思い質問させて頂きました。
コーディングを勉強し始めてまだ3ヶ月ということもあり、なかなか解決策を見つけ出すことができません。ご回答よろしくお願い致します。

HTML

  <div class="main-visual">
    <img src="images.logo/main-logo.png" alt="" class="logo-img">
    <div class="slider">
      <img src="images.photo/main-1.png">
      <img src="images.photo/main-2.png">
      <img src="images.photo/main-3.png">
    </div>
  </div>

CSS

.main-visual {
  overflow: hidden;
  position: relative;
}
.logo-img {
  position: absolute;
  top: 25%;
  left: 33%;
  z-index: 1;
}

jQuary

$(function(){
  $('.slider').slick({
  dots: false,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 1500,
  speed: 2000,
  fade: true,
  cssEase: 'linear'
});
});

Answer 1

幅を％で指定すればいいでしょう。
left: 33%;と指定しているので、中央寄せにしたいならwidth: 33%;にすればいいでしょう。

Comments

[naruto-k]

早速のご回答をありがとうございます。
ご教授頂いた通り、width: 33%;で縮小されました！
しかし、ロゴが左寄せになってしまったので、margin: 12% 33%;を追記すると中央寄せかつ、縮小されるようになりました。
単位の使い分けの理解が全く出来ていないと分かったので、単位について理解を深めていこうと思います。
ありがとうございました！！