다음 CSS에서 모바일 가로로 회전시 채택완료
대한사랑
6개월 전
조회 1,462
다음 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%); } }
고수님들 부탁드립니다
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
6개월 전
</p>
<p>/* 모바일 가로 회전 스타일 */
@media screen and (orientation: landscape) {
.woocommerce ul.products li.product a img {
transform: scale(2); /* 두 배 크기 */
}
}</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 12개
�
대한사랑
6개월 전
�
바닐라코드
6개월 전
[code]
/* 모바일 가로 회전 스타일 */
@media screen and (orientation: landscape) {
.woocommerce ul.products li.product a img {
width: auto;
height: auto;
transform: scale(2); /* 두 배 크기 */
}
}
[/code]
/* 모바일 가로 회전 스타일 */
@media screen and (orientation: landscape) {
.woocommerce ul.products li.product a img {
width: auto;
height: auto;
transform: scale(2); /* 두 배 크기 */
}
}
[/code]
�
대한사랑
6개월 전
그대로 입니다
�
바닐라코드
6개월 전
[code]
@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%);
}
}
[/code]
@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%);
}
}
[/code]
�
대한사랑
6개월 전
올려주신 소스가 맞는 거 같은데 제 사이트에 뭐가 있는지
적용이 안되네요
제 사이트주소는 e-madeinkorea.net 입니다
도움부탁드립니다
적용이 안되네요
제 사이트주소는 e-madeinkorea.net 입니다
도움부탁드립니다
�
바닐라코드
6개월 전
인라인 36번째 줄을 아래처럼 수정해보세요.
[code]
@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%);
}
}
[/code]
[code]
@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%);
}
}
[/code]
�
대한사랑
6개월 전
적용을 하면 데스크탑모드에서
썸네일 이미지가 많이 커집니다
썸네일 이미지가 많이 커집니다
�
바닐라코드
6개월 전
아래 코드 추가하시면 됩니다.
[code]
@media (min-width: 1200px) {
.woocommerce ul.products li.product a img {
width: 276px
height: 276px;
background-color:white;
object-fit: contain;
transform: none;
}
}
[/code]
[code]
@media (min-width: 1200px) {
.woocommerce ul.products li.product a img {
width: 276px
height: 276px;
background-color:white;
object-fit: contain;
transform: none;
}
}
[/code]
�
대한사랑
6개월 전
모바일 회전시 썸네일이 커지지도 않고 추가코드를 넣으면 데스크탑모드에서 썸네일이 작아지며 어긋나네요
제 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%);
}
}
제 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%);
}
}
�
바닐라코드
6개월 전
미디어 쿼리에서 이미지가 커지길 원하는 부분에만
transform:scale(2);
넣어주시고
이미지가 커지면 안되는 미디어쿼리에는
transform:none;
넣어주시면 됩니다.
미디어 쿼리를 너무 세세하게 잡으신것 같습니다.
아래처럼 해보세요.
모바일용 css 먼저 작성
//테블릿용 세로 css
@media (min-width: 768px) {
}
//테블릿 가로 css
@media (min-width: 992px) {
}
//pc화면용 css
@media (min-width: 1200px) {
}
모바일용css를 먼저 작성하시면 아래 미디어 쿼리로 상속이 됩니다.
변경을 원하는 미디어쿼리에만 새로운 css 작성하시면 됩니다.
transform:scale(2);
넣어주시고
이미지가 커지면 안되는 미디어쿼리에는
transform:none;
넣어주시면 됩니다.
미디어 쿼리를 너무 세세하게 잡으신것 같습니다.
아래처럼 해보세요.
모바일용 css 먼저 작성
//테블릿용 세로 css
@media (min-width: 768px) {
}
//테블릿 가로 css
@media (min-width: 992px) {
}
//pc화면용 css
@media (min-width: 1200px) {
}
모바일용css를 먼저 작성하시면 아래 미디어 쿼리로 상속이 됩니다.
변경을 원하는 미디어쿼리에만 새로운 css 작성하시면 됩니다.
�
대한사랑
6개월 전
답변 달아주셔서 너무 고맙습니다
어떠한 수정된 CSS코드를 넣어도 모바일에서 썸네일을 세로로 보다가 가로로 회전했을 때
썸네일 이미지 크기가 전혀 변동이 없어서요
이미지 크기가 변동되는 부분을 찾으면 어떻게든 할 수 있을 거 같은데
챗gpt며 검색을 해도 그 부분을 찾을 수가 없네요
어떠한 수정된 CSS코드를 넣어도 모바일에서 썸네일을 세로로 보다가 가로로 회전했을 때
썸네일 이미지 크기가 전혀 변동이 없어서요
이미지 크기가 변동되는 부분을 찾으면 어떻게든 할 수 있을 거 같은데
챗gpt며 검색을 해도 그 부분을 찾을 수가 없네요
�
대한사랑
6개월 전
해결했습니다
너무 고맙습니다 ^^
너무 고맙습니다 ^^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
적용해보면 그대로 입니다