Magnificent Popup의 팝업 이미지 주변에 검정색 경계선 하나만 놓기

Question

여기 웹에서 정보를 찾을 수 없었습니다. Magnificic Popup 사용하기 나는 팝업 이미지를 하나의 검은 색 테두리로 표시하고 싶습니다. 필자는 Magnific-popup.css 파일로 간 다음과 같은 추가 : 내가 갖는 어떤

/* Main image in popup */ 
img.mfp-img { 
    width: auto; 
    max-width: 100%; 
    height: auto; 
    display: block; 
    line-height: 0; 
/*my attempt at adding a border around the image */ 
    **border: 2px solid red;** 
/* end attempt */  
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 40px 0 40px; 
    margin: 0 auto; } 

는 표시 영역에 빨간색 테두리입니다, 이미지 주위에 검은 색 회색 테두리를 추가합니다.

이전에이 작업을 수행 한 사람이 있습니까? 미리 감사드립니다.

Answer 1

문제는 이미지로 설정되어있는 패딩에 의해 발생,이 같은 마진과 패딩을 교체하려고 :

img.mfp-img { 
    padding: 0; 
    margin: 40px auto; 
    /*Add your border*/ 
    border: 2px solid red; 
} 

이 또한 내가 어떤 플러그인 핵심 파일을 수정하는 것은 나쁜 사례로 간주되는 점에 유의해야한다 최신 버전으로 업그레이드하는 것이 어려워 지므로 별도의 CSS 파일을 만들어 사용자 지정 스타일을 무시하거나 추가하는 것이 좋습니다.

Answer 2

내가이 일을 발견하는 가장 좋은 방법은 이미지에서 패딩을 제거하고 문제가 있었다 그래서

img.mfp-img { 
    padding: 0; 
    border: 2px solid red; 
    } 

    .mfp-figure figure::before { 
    padding-top: 40px; 
    display: block; 
    content: ""; 
    } 

    .mfp-figure figure::after { 
    padding-bottom: 40px; 
    display: block; 
    content: ""; 
    }