모바일 회전시 썸네일 이미지 작아지는 문제 채택완료
모바일 가로로 회전하면 이미지가 커졌다가 다시 세로로 회전하여 돌아오면
썸네일 이미지가 처음보다 아주 크게 작아지는 문제는 어떻게 해결해야 할까요
아래 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 를 앞단에 추가해보면 어떨까 싶습니다.
</p>
<p>/* 기본 이미지 스타일 추가 - 미디어 쿼리 바깥에 배치 */
.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;
}</p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
앞에다 넣어봤는데 그대로 입니다