-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
모달창에 img를 링크시 가로가 넘쳐 스크롤이 생깁니다
22.08.08 17:10 작성 조회수 620
1
안녕하세요 선생님
강의를 듣고 모달창을 활용하여
개인사이트를 제작중
모달창에 img를 링크했을때 사진크기가 커서 화면안에
100%로 나오지 않고 넘쳐서 스크롤이 생기더라구요
검사로 들어가 이미지에 width: 100% 를
주니 화면에 꽉차게 변황이 되긴하는데
어떤 코드를 css로 가져와야할지 모르겠습니다 ㅠㅠ
.featherlight-inner 안에서 어디로 줘야할지...
선생님 도와주세요 ㅠㅠ 감사합니다!
.
반응형 웹사이트 포트폴리오(Architecture Agency)
서브페이지 링크하기(Modal Iframe Jquery Plugin) #03(플러그인 CSS 디자인 변경 )
강의실 바로가기
답변을 작성해보세요.
0
0
김형규
질문자2022.08.09
html
<div class="project-content">
<div class="project-photo">
<a href="link/orion/main/main.html" data-featherlight="iframe">
<img src="images/project01-orion-mokup.png" alt="오리온">
</a>
</div>
<div class="project-txt">
<h3>오리온</h3>
<p class="project-txt01">
기존 홈페이지의 복잡한 메뉴구성과 메인, 서브페이지를 통일성있게 디자인하고
프리미엄 브랜드와 제품을 소비자에게 소개하는 내용을 중점적으로 리뉴얼 하였습니다.
</p>
<p>
<span>제작 방식</span> : HTML5 / CSS / JQuery<br>
<span>제작 기간</span> : 14일<br>
<span>제작 참여율</span> : 팀프로젝트 (기획, 서브메뉴-제품소개, 고객센터 100% 제작)
</p>
<div class="project-btn">
이부분이 버튼 부분이고 폴더에 있는 이미지와 사이트 링크를 모달로 사용한 부분입니다
<a href="link/orion/main/main.html" data-featherlight="iframe">WEB SITE</a>
<a href="link/orion-conceptpage.png" data-featherlight="iframe">스타일 가이드</a>
</div>
</div>
</div>
css
/* ########## Project : featherlight ########## */
.featherlight .featherlight-content {
position: relative;
width: 100%;
height: 100%;
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;
}
.featherlight iframe {
border: none;
width: 100%;
height: 100%;
}
.featherlight .featherlight-close-icon {
position: absolute;
z-index: 9999;
top: 30px;
right: 50px;
width: 40px;
height: 40px;
cursor: pointer;
text-align: center;
font-family: Arial, sans-serif;
background-color: #e9f900;
color: #003df3;
border-radius: 50%;
border: none;
padding: 0;
font-size: 30px;
}
------이부분이 선생님께서 해보라고 하신 부분입니다!-----
.featherlight-content iframe img {
width: 100%!important;
}
이미지파일이나 pdf파일을 바로 모달로 링크를 걸었고
혹시 다른방법이 있을까요?
빠른 답변 정말 감사드립니다!
코딩웍스(Coding Works)
지식공유자2022.08.10
a 태그 href 속성 내에 있는 이미지의 너비를 100%로 만드는게 이것저것 다 해봤는데 안되네요.
방법을 찾지 못하니 꼭 하셔야 한다면 img를 html에 넣고 html을 a 태그 href 속성 내에 불러와야 할 것 같습니다.
0
김형규
질문자2022.08.09
답변 감사합니다
일단 그렇게 넣어봤는데 변화가 없습니다
a>img 를 넣은것이 아니고
<a href="/link/orion-conceptpage.png" data-featherlight="iframe">스타일 가이드</a>
이런식으로 링크로 사용하였습니다
0
코딩웍스(Coding Works)
지식공유자2022.08.08
.featherlight-content iframe img에 width: 100%로 안되면 !important 한번 주세요.
답변 4