스트레치 이미지는 가로 세로 비율을

HTML :

<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Fullscreen image</title> 
    </head> 
    <body> 
     <img src="https://cdn.discordapp.com/attachments/187205892989648897/251689220819648513/e448455be034a36f6e09b46e671bdfd1.png" alt="Loading..." id="slide" /> 
    </body> 
</html>

CSS : https://jsfiddle.net/fu3bL2Lx/1/

: 나는 일을 같이하는 방법의

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

html, body { 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
} 

#slide { 
    width: 100%; 
    height: 100%; 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
}

데모 브라우저를 늘리고 크기를 조정하면 이미지가 여전히 수직으로 중앙에 위치합니다. 가로 세로 비율을 유지하면서 뷰포트 내부에 끼워 넣을 수 있습니다.

나는 이미지 주변의 공백을 클릭하면, 나는 여전히 alert 내가이 인 flexbox 해결 될 수있는 확신이이 img

결합 된 트리거 얻을 수있다 여기에 문제가되지와 경우 그냥 정기적으로 설정 해제 display 값,하지만 난 그것에 대해 잘 알고 아니에요.

출처

2016-11-25 user1263513

게시물에서 볼 수있는 관련 코드를 제공해주십시오. – LuudJacobs

이미지가 여전히 뷰포트의 100 %를 차지하고 있기 때문입니다.

width: 100%; 
    height: 100%; 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain;

당신 실제 이미지 때문에 object-fit 재산, MDN의 정상 유지 : 개체 맞는 CSS 속성은 대체 요소의 내용의 사용에 의해 설립 된 박스에 장착 할 방법을 지정

높이와 너비.

함유 수단은 : 그 구체적인 객체의 크기가 소자의 사용 폭과 높이에 대해 포함 제약으로 해결된다

교체 된 내용은 요소의 콘텐츠 상자 내에 피팅 동안 종횡비를 유지하도록 크기가되고 .

이미지 주위의 공백을 클릭 할 수있는 이유입니다.

출처

2016-11-25 13:42:14 Roberrrt

MDN에서 'object-fit'이 사용되기 전에 어떤 것을 찾았지만 더 잘 모른다는 것을 당분간 알게되었습니다. – user1263513

나는 이것이 당신의 문제를 해결했다고 생각합니까? :). – Roberrrt

절대적으로, 당신은'object-fit'과'contain' 값에 대한 정의를 붙여 넣었습니다. 나는 그것을 사용하기 전에 이미 읽었습니다. 그런 다음 해결책을 찾기위한 방향에 대한 지침이 없습니다. – user1263513

스트레치 이미지는 가로 세로 비율을

답변

관련 문제