답변 고맙습니다

적용해보면 그대로 입니다

/* 모바일 가로 회전 스타일 */
@media screen and (orientation: landscape) {
  .woocommerce ul.products li.product a img {
    width: auto;
    height: auto;
    transform: scale(2); /* 두 배 크기 */
  }
}

그대로 입니다

@media screen and (min-width: 768px) and (orientation: landscape) {
   .woocommerce ul.products li {
    overflow: hidden;
 }
.woocommerce ul.products li.product a img {
        width: auto; 
        height: auto;
        background-color:white;
        object-fit: contain;
        transform: scale(2);
        clip-path: inset(25%);
      }
}

올려주신 소스가 맞는 거 같은데 제 사이트에 뭐가 있는지

적용이 안되네요

제 사이트주소는 e-madeinkorea.net 입니다

도움부탁드립니다

인라인 36번째 줄을 아래처럼 수정해보세요.

 @media (min-width: 1025px) {
  .woocommerce ul.products li.product a img {
       width: auto; 
        height: auto;
        background-color:white;
        object-fit: contain;
        transform: scale(2);
        clip-path: inset(25%);
    }
}

적용을 하면 데스크탑모드에서

썸네일 이미지가 많이 커집니다

아래 코드 추가하시면 됩니다.

 @media (min-width: 1200px) {
  .woocommerce ul.products li.product a img {
       width: 276px 
        height: 276px;
        background-color:white;
        object-fit: contain;
        transform: none;
  }
}

모바일 회전시 썸네일이 커지지도 않고 추가코드를 넣으면 데스크탑모드에서 썸네일이 작아지며 어긋나네요

제 CSS코드를 보여드리자면

@media (max-width: 767px) {

.woocommerce ul.products li {
    overflow: hidden;
}

.woocommerce ul.products li.product a img {
  width: 180px;
  height: 180px;
background-color:white;
object-fit: contain;
transform: scale(2.0);
  clip-path: inset(25%);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {

.woocommerce ul.products li {
    overflow: hidden;
}

.woocommerce ul.products li.product a img {
  width: 268px;
  height: 268px;
background-color:white;
object-fit: contain;
transform: scale(2.0);
  clip-path: inset(25%);
  }
}

@media (min-width: 1025px) {

.woocommerce ul.products li.product a img {
  width: 276px;
  height: 276px;
background-color:white;
object-fit: contain;
}
}

@media (max-width: 767px) {
.rtwpvg-wrapper .rtwpvg-slider img {
width: 373px;
  height: 373px;
background-color:white;
object-fit: contain;
transform: scale(2.0);
  clip-path: inset(25%);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
.rtwpvg-wrapper .rtwpvg-slider img {
width: 390px;
  height: 390px;
background-color:white;
object-fit: contain;
transform: scale(2.0);
  clip-path: inset(25%);
  }
}

미디어 쿼리에서 이미지가 커지길 원하는 부분에만
transform:scale(2);
넣어주시고
이미지가 커지면 안되는 미디어쿼리에는
transform:none;
넣어주시면 됩니다.

미디어 쿼리를 너무 세세하게 잡으신것 같습니다.

아래처럼 해보세요.



모바일용 css 먼저 작성

//테블릿용 세로 css
@media (min-width: 768px) {
 
}
//테블릿 가로 css
@media (min-width: 992px) {
   
}
//pc화면용 css
@media (min-width: 1200px) {
 
}

모바일용css를 먼저 작성하시면 아래 미디어 쿼리로 상속이 됩니다.
변경을 원하는 미디어쿼리에만 새로운 css 작성하시면 됩니다.

답변 달아주셔서 너무 고맙습니다

어떠한 수정된 CSS코드를 넣어도 모바일에서 썸네일을 세로로 보다가 가로로 회전했을 때

썸네일 이미지 크기가 전혀 변동이 없어서요

이미지 크기가 변동되는 부분을 찾으면 어떻게든 할 수 있을 거 같은데

챗gpt며 검색을 해도 그 부분을 찾을 수가 없네요

해결했습니다

너무 고맙습니다 ^^