2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
안녕하세요 항상 강의 잘 듣고 있습니다 Apple Music UI 만들기 수강 중 질문이 있습니다.......... 창 크기를 줄이면 이미지가 다 보이는데 전체 화면으로 하면 이미지 2/3가 잘려서 보입니다 강의 그대로 코드 따라 쳤고 기능도 잘 구현되는데 화면만 키우면 이미지가 잘려서 보여요!!! 라이브 서버를 엣지로 열고 있는데 관련 있을까요? 제발 도와주세요
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="main.css"> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body>
<!-- 카드 3개 차례대로 진열하기 --> <div class="card-background"> <div class="card-box"> < img src="card1.png"> </div> <div class="card-box"> < img src="card2.png"> </div> <div class="card-box"> < img src="card3.png"> </div> </div>
<script src="index.js"></script> </body> </html>
---------------- js // 스크롤 시 오퍼시티 조정하기 $(window).scroll(function(){ let 높이 = $(window).scrollTop(); // 현재 스크롤바 높이console.log(높이)
let y = (-1 / 500) * 높이 + (115 / 50); let z = (-1 / 5000) * 높이 + (565 / 500);
if (650 < 높이 && 높이 < 1150) { // 카드 opacity 조정 $('.card-box').eq(0).css('opacity', y); // 카드 크기 조정 $('.card-box').eq(0).css('transform', `scale( ${z} )`); }});--------------------- css
.card-background { height: 3000px; margin-top: 800px; margin-bottom: 1600px; }.card-box img { display: block; margin: auto; max-width: 80%; }.card-box { position: sticky; top: 400px; margin-top: 200px; }
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.