• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

안녕하세요 iframe css 에 대한 질문입니다.

20.12.01 01:26 작성 조회수 274

1

안녕하세요, 

iframe 제이쿼리 연결해서 모달창 띄우는 부분에서 질문이 있는데요, 

강의하신 내용대로 아래와 같이 수정하면

html 페이지 링크했을때는 괜찮은데 이미지를 링크하면 이미지도 화면에 꽉차게 뜨는데요, 혹시 이미지는 원래 기본설정대로 두고 html페이지에만 css 적용시킬 방법이 있을까요? 

제작자 깃허브 보면 

<a href="#" data-featherlight="myimage.png">Open image in lightbox</a>
<a href="#" data-featherlight="myhtml.html .selector">Open ajax content in lightbox</a>
<a href="#" data-featherlight="<p>Fancy DOM Lightbox!</p>">Open some DOM in lightbox</a>

이런식으로 나뉘어져서 써있긴 한데 이렇게 해봐도 창은 전체화면 크기입니다. ㅠㅠ


.featherlight .featherlight-content {
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  overflow: auto;
  padding: 0;
  border-bottom: 25px solid transparent;
  margin-left: 0;
  margin-right: 0;
  max-height: 100%;
  background: #fff;
  cursor: auto;
  white-space: normal;
  width: 100%;
  height: 100%;
}

답변 4

·

답변을 작성해보세요.

1

이미지를 링크했을 때 이미지가 강제로 100% 되는 문제라고 생각해서 제가 아래처럼 해봤어요.

<a href="#" data-featherlight="logo.png">Logo</a>

위에 처럼 이미지를 링크해봤는데 이미지 크기가 정상적으로 보이는데 어떤 문제인지 정확히 파악이 되지 않는데요.

0

넵 감사합니다 ^^

0

아.. 이미지가 풀스크린으로 보이고 싶으신거군요. 

질문 이해했습니다.

제가 내일 테스트해볼게요.

참.. 질문내용에 깃허브 주소는 메모해 놨어요. 전체 소스가 오픈되니까 지워주세요.^^

0

저는 이미지만 링크해서 모달창에서 따로 뜨게 하고 싶어서 이런식으로 링크했는데요,  

이미지가 모달창에서 새로 뜨긴 하는데 원작자처럼 이미지 크기에 맞게 창이 뜨는게 아니고

아래 사진처럼 전체화면에 이미지만 원래 크기대로 뜹니다. 

링크는 아래와 같이 했구요.. 

  <a class="aws-viewhref="#data-featherlight="./images/aws-cirt.jpg">VIEW CIRTIFICATION</a>
              </div>

혹시 나중에 시간 나신다면 한번 봐주시면 감사하겠습니다. 

그럼 좋은 하루 보내세요 유익한 강의 감사드립니다^^