모달창에 img를 링크시 가로가 넘쳐 스크롤이 생깁니다

Question

안녕하세요 선생님 강의를 듣고 모달창을 활용하여 개인사이트를 제작중 모달창에 img를 링크했을때 사진크기가 커서 화면안에 100%로 나오지 않고 넘쳐서 스크롤이 생기더라구요 검사로 들어가 이미지에 width: 100% 를 주니 화면에 꽉차게 변황이 되긴하는데 어떤 코드를 css로 가져와야할지 모르겠습니다 ㅠㅠ .featherlight-inner 안에서 어디로 줘야할지... 선생님 도와주세요 ㅠㅠ 감사합니다! .

김형규 · Answer

네 그렇게 해야할것같아요 감사합니다!

김형규 · Answer

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 =" 오리온 "> < div class =" project-txt "> < h3 > 오리온 < p class =" project-txt01 "> 기존 홈페이지의 복잡한 메뉴구성과 메인, 서브페이지를 통일성있게 디자인하고 프리미엄 브랜드와 제품을 소비자에게 소개하는 내용을 중점적으로 리뉴얼 하였습니다. < p > < span > 제작 방식 : HTML5 / CSS / JQuery < br > < span > 제작 기간 : 14일 < br > < span > 제작 참여율 : 팀프로젝트 (기획, 서브메뉴-제품소개, 고객센터 100% 제작) < div class =" project-btn "> 이부분이 버튼 부분이고 폴더에 있는 이미지와 사이트 링크를 모달로 사용한 부분입니다 < a href =" link/orion/main/main.html " data-featherlight =" iframe "> WEB SITE < a href =" link/orion-conceptpage.png " data-featherlight =" iframe "> 스타일 가이드 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파일을 바로 모달로 링크를 걸었고 혹시 다른방법이 있을까요? 빠른 답변 정말 감사드립니다!

김형규 · Answer

답변 감사합니다 일단 그렇게 넣어봤는데 변화가 없습니다 a>img 를 넣은것이 아니고 < a href =" /link/orion-conceptpage.png " data-featherlight =" iframe "> 스타일 가이드 이런식으로 링크로 사용하였습니다

코딩웍스(Coding Works) · Answer

.featherlight-content iframe img에 width: 100%로 안되면 !important 한번 주세요.