imgタグ内の画像拡大処理について

Question

下記サイトを参考に、<div>タグ内の<img>タグに配置した画像を拡大する処理を作成いたしました。
https://wemo.tech/1653

挙動は期待通りに出来上がったのですが、一つ疑問があります。

<div>タグに新しく.zoomクラスを付与することで処理をしているのですが、何故<div>そのものではなく、子要素である<img>が拡大されるのでしょうか？おそらく初歩的な勘違いだと思うのですが、どなたかご教示頂ければ幸いです。

 <div id="slide_wrapp">
  <div class="slide_item">
    <img src="./image/sample.jpeg" alt="img1" onload="sliderStart()">
  </div>
</div>

#slide_wrapp {
  position: relative;
  overflow: hidden;
  width: 80%;
  height: 95vh;
  margin: 0 auto;
}

#slide_wrapp .slide_item {
  transform: scale(1);
  transition:transform 7.5s linear;
  position: relative;
  z-index: 1;
}

#slide_wrapp .slide_item.zoom_ {
  transform: scale(1.1);
}

#slide_wrapp .slide_item img {
  display: block;
}

function sliderStart() {

    const slide = document.getElementById('slide_wrapp');      //スライダー親
    const slideItem = slide.querySelectorAll('.slide_item');   //スライド要素
    slideItem[0].classList.add('zoom_');
}

Answer 1

transform: scale(1.1);が適用された要素（今回の場合div要素）自体を拡大して表示するので、中に入っている物も拡大されます。

Comments

[Kotolog_shun]

早速ありがとうございます。追加ですいません。
もしそうだとすると、例えば、</div>の後に何かの要素があった場合、divの拡大によって、直後の要素が下に押し下げられるような気がするのですが、そのようには挙動しないのは何故でしょう？

[kei344]

「divの拡大」ではなく「表示（レンダリングされた結果）の拡大」と考えればよいと思います。