imgur에서 가져온 내 팝업 이미지를 반응 적으로 만들려면 어떻게해야합니까?

내 팝업 이미지를 반응 적으로 만드는 데 문제가 있습니다. 많은 시간 동안 문제를 풀려고했지만 아무 소용이 없었습니다 누구든지 내 코드에서 문제를 발견 할 수 있습니까?imgur에서 가져온 내 팝업 이미지를 반응 적으로 만들려면 어떻게해야합니까?

https://jsfiddle.net/mcs29L9p/

https://pastebin.com/5DUdJptp

는

#popup-box 
{ 
     display:none; 
     position:absolute; 
     //border:solid 1px #f5f5f5; 
     //background:#fff; 
     //box-shadow:0 0 10px #666; 
     left:0; 
     top:0; 
     bottom:0; 
     right:0; 
     margin:auto; 

     width: 600px; 
     height: 600px;   
} 

#popup-image 
{ 
    width:100%; 
    height:auto; 
}

출처

2017-09-12 rccnls27

왜 jsfiddle 또는 이와 동등한 것을 사용하여 실제 예제가 아닌 pastebin입니까? – Derlin

(css) 주석은'/ * ... * /'이며, 이중 슬래시는'//'작동하지 않습니다. – Derlin

예, 수정합니다. 뉴비 여기 :) 감사합니다 – rccnls27

첫째, jsfiddle는 CSS, HTML과 JS 다른 "편집자"와 함께 제공되는 전체 코드의 페이스트 빈 또는 jsfiddle을 확인하시기 바랍니다. 제발, 모든 것을 HTML보기에 넣지 마십시오 (예제는 아래의 바이올린을보십시오).

귀하의 질문에 및 height 속성을 사용하여 #popup-box의 크기를 하드 코딩하면 이것이 적용되지 않습니다.

#popup-box { 
    /* ... */ 
    max-width: 600px; 
    max-height: 600px; 
}

완전한 예를 들어 this fiddle를 참조하십시오 : 하나의 간단한 수정 대신 max-width 및 max-height을 사용하는 것입니다. 보조 노트으로

: 웹 사이트가 반응하고 많은 일이다. 다행스럽게도, 많은 CSS 프레임 워크가 당신을 위해 그것을 처리 할 수 있습니다 : bootstrap, semantic-ui, 약간의 자료. 프로덕션 사이트를 만드는 경우 휠을 다시 작성하는 대신 해당 사이트로 전환하는 것이 좋습니다.

출처

2017-09-12 10:04:12 Derlin

imgur에서 가져온 내 팝업 이미지를 반응 적으로 만들려면 어떻게해야합니까?

답변

관련 문제