인프런 커뮤니티 질문&답변
작성한 질문수
모달창에 img를 링크시 가로가 넘쳐 스크롤이 생깁니다
작성
·
851
.답변 4
0
0
김형규
질문자
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파일을 바로 모달로 링크를 걸었고
혹시 다른방법이 있을까요?
빠른 답변 정말 감사드립니다!
0
김형규
질문자
답변 감사합니다
일단 그렇게 넣어봤는데 변화가 없습니다
a>img 를 넣은것이 아니고
<a href="/link/orion-conceptpage.png" data-featherlight="iframe">스타일 가이드</a>
이런식으로 링크로 사용하였습니다
0
a 태그 href 속성 내에 있는 이미지의 너비를 100%로 만드는게 이것저것 다 해봤는데 안되네요.
방법을 찾지 못하니 꼭 하셔야 한다면 img를 html에 넣고 html을 a 태그 href 속성 내에 불러와야 할 것 같습니다.