모바일 회전시 썸네일 이미지 작아지는 문제
본문
모바일 가로로 회전하면 이미지가 커졌다가 다시 세로로 회전하여 돌아오면
썸네일 이미지가 처음보다 아주 크게 작아지는 문제는 어떻게 해결해야 할까요
아래 CSS소스에서 어디를 고쳐야 하는지 알려주세요
제 사이트는 e-madeinkorea.net 입니다
@media (max-width: 767px) {
.woocommerce ul.products li {
overflow: hidden;
}
.woocommerce ul.products li.product a img {
width: 185px;
height: 185px;
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: 250px;
height: 250px;
background-color:white;
object-fit: contain;
transform: scale(3.0);
clip-path: inset(32%);
}
}
답변 1
다음 css 를 앞단에 추가해보면 어떨까 싶습니다.
/* 기본 이미지 스타일 추가 - 미디어 쿼리 바깥에 배치 */
.woocommerce ul.products li.product a img {
width: auto;
height: auto;
background-color: white;
object-fit: contain;
transform: scale(1.0);
clip-path: none;
transition: transform 0.3s ease;
}
답글 고맙습니다
앞에다 넣어봤는데 그대로 입니다