반응형 크기에 따라 이미지 height 자동 조절하기

if (document.querySelector('.giftMainImg') !== null) {

  const giftMainImg = document.querySelector('.giftMainImg')
  const gitfImgArea = document.querySelector('.gitfImgArea')
  const productItemContents = document.querySelector('.prt_item_desc')
  const prtpad = document.querySelector('.prt_pad')

  window.addEventListener('resize', () => {
    if (`${prtpad.clientWidth}` >= 768) {
      giftMainImg.style.height = `${giftMainImg.clientWidth}px`
      productItemContents.style.height = `${gitfImgArea.clientHeight}px`
    }
    else {

      productItemContents.style.height = `100%`
      giftMainImg.style.height = `${giftMainImg.clientWidth}px`
    }
  })

  giftMainImg.style.height = `${giftMainImg.clientWidth}px`
  productItemContents.style.height = `${gitfImgArea.clientHeight}px`
}


if (document.querySelector('.giftMainImg') !== null) {
  const giftMainImg = document.querySelector('.giftMainImg')
  const giftSubImgList = document.querySelectorAll('.giftSubImgList>li')

  giftSubImgList.forEach((item) => {
    item.addEventListener('mouseover', () => {
      giftMainImg.src = item.children[0].src
    })
    // item.addEventListener('mouseout', () => {
    //   giftMainImg.src = giftMainImgSrc
    // })
  })
}
resize는 브라우저의 창 크기를 조절 했을 떄 이벤트이다 
window.addEventListener('resize', () => {
윈도우.이벤트(사이즈 조절이 일어났을 떄
if(`${~~.clientWidth}` >= 768) {
~~의 padding 포함한 px단위의 요소 가시너비 반환.가 768보다 크거나 같다면

      giftMainImg.style.height = `${giftMainImg.clientWidth}px`
 ~~.에 style.height를 ~~의clientWidth로 바꾸겠다
else{

      productItemContents.style.height = `100%`
100퍼로 변경     
 giftMainImg.style.height = `${giftMainImg.clientWidth}px`
}

다음
마우스 호버시 이미지가 마우스 클릭한 첫 자식으로 변경이 된다