내에서 IMG 높이 문제를 해결. 기본적으로 모든 세로 이미지 * (예 : 마지막 이미지 참조) * 높이가 화면이나 창 최대 높이를지나갑니다. 나는 높이가 유연 해지고 스크린에 적응할 수있는 것을 구현하고 싶다.내가 거의 JSbin에 여기에 본 내 라이트 박스, 끝났어요 가능한 라이트 박스 코드
아직 가로 이미지로 문제를 보지 못했지만 기본적으로 이미지가 항상 화면 내에 표시되도록하고 싶습니다.
음, 방금 너비를 100 % 추가했습니다. 라이트 박스의 모든 이미지에 ... 그러나 기본 컴퓨터 화면은 풍경입니다. 물론 인물 사진은 오버 플로우됩니다.
CSS에는 몇 가지 해결책이 있지만,이 문제를 해결하려면 자바 스크립트를 사용해야한다고 생각합니다.
이미지 비율, 라이트 박스 컨테이너 비율 (여기서는 뷰포트 비율)을 얻고 그에 따라 CSS를 적용하십시오. img 비율이 컨테이너 비율보다 우수한 경우 : img 너비 : 100 %, img 높이 : auto; 그렇지 않으면 반대로!
당신이 라이트 박스에 이미지를 표시하는 기능이 코드를 넣어,이 기능마다 전화 (그래서 당신은 그것을 열고 이미지를 변경할 때. 때)그러나 궁극적으로 당신을 추천 할 것입니다 라이트 박스 플러그인을 사용하는 것은 지금 당장 당신이하는 방식이 라이트 박스에 모든 이미지를 직접 넣는 것이 좋지 않기 때문에 자바 스크립트를 통해 하나씩로드해야합니다.
너비가 일시적으로 100 %로 설정되었습니다. 나는 그것을 너무 많이 엉망으로 만들었 기 때문에 나는 그걸 가지고 조금 놀았지만 그것을 다시 설정했다. 필자는 항상 플러그인에 압도되어서 단계별 JS 튜토리얼을 찾아 쉽게 손으로 코딩했습니다. 그러나 나는 간단한 것을 기반으로 플러그인을 찾으려고 노력할 것이다. 메신저 그 정보를 자바 스크립트에 그렇게 잘 모르겠지만 그 기능을 작성하는 방법을 알아 볼 수 있습니다. – sampdesigns
StackOverflow에 오신 것을 환영합니다. 이걸 조금 편집 했는데도 여전히 말투로되어있어 가능한 한 간결하게 편집 할 수 있습니까? 귀하의 "TL/DR"은 충분히 구체적이지 않을 수도 있습니다 - 당신이 원하는 것을 정확하게 설명하십시오. –
나는 편집을 승인했다. 그러나 내가 그것을 많이 자르는 것에 관해 내가 할 수있는 것을 볼 것이다. – sampdesigns