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

반응형 웹사이트 포트폴리오(Architecture Agency)

서브페이지 링크하기(Modal Iframe Jquery Plugin) #03(플러그인 CSS 디자인 변경 )

작성

402

안녕하세요,

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%;
}

jquery 웹 디자인 HTML/CSS 반응형-웹

답변 4

코딩웍스(Coding Works)

지식공유자

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

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

dosagam6301

질문자

넵 감사합니다 ^^

코딩웍스(Coding Works)

지식공유자

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

질문 이해했습니다.

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

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

dosagam6301

질문자

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

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

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

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

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

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

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

인프런 커뮤니티 질문&답변

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