다음 CSS에서 모바일 가로로 회전시 채택완료
다음 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 포인트
바닐라코드
8개월 전
</p>
<p>/* 모바일 가로 회전 스타일 */
@media screen and (orientation: landscape) {
.woocommerce ul.products li.product a img {
transform: scale(2); /* 두 배 크기 */
}
}</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 12개
�
8개월 전
�
바닐라코드
8개월 전
[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]
�
바닐라코드
8개월 전
[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]
�
8개월 전
올려주신 소스가 맞는 거 같은데 제 사이트에 뭐가 있는지
적용이 안되네요
제 사이트주소는 e-madeinkorea.net 입니다
도움부탁드립니다
적용이 안되네요
제 사이트주소는 e-madeinkorea.net 입니다
도움부탁드립니다
�
바닐라코드
8개월 전
인라인 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]
�
바닐라코드
8개월 전
아래 코드 추가하시면 됩니다.
[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]
�
8개월 전
모바일 회전시 썸네일이 커지지도 않고 추가코드를 넣으면 데스크탑모드에서 썸네일이 작아지며 어긋나네요
제 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%);
}
}
�
바닐라코드
8개월 전
미디어 쿼리에서 이미지가 커지길 원하는 부분에만
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 작성하시면 됩니다.
�
8개월 전
답변 달아주셔서 너무 고맙습니다
어떠한 수정된 CSS코드를 넣어도 모바일에서 썸네일을 세로로 보다가 가로로 회전했을 때
썸네일 이미지 크기가 전혀 변동이 없어서요
이미지 크기가 변동되는 부분을 찾으면 어떻게든 할 수 있을 거 같은데
챗gpt며 검색을 해도 그 부분을 찾을 수가 없네요
어떠한 수정된 CSS코드를 넣어도 모바일에서 썸네일을 세로로 보다가 가로로 회전했을 때
썸네일 이미지 크기가 전혀 변동이 없어서요
이미지 크기가 변동되는 부분을 찾으면 어떻게든 할 수 있을 거 같은데
챗gpt며 검색을 해도 그 부분을 찾을 수가 없네요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택
적용해보면 그대로 입니다