여기에 QA를 많이 보았지만 확실한 답을 찾지 못했습니다.div 내부의 비율 이미지 및 CSS를 사용하여 이미지의 가장 큰면에 맞춰 짐
동적 인 너비와 높이의 div가 있고 그 안에 모든 크기의 이미지를 맞추고 가로 세로 비율을 유지하려고합니다. 이 이미지를 위 또는 아래로 확장 될 수있다 :
나는 폭, 높이, 최대 너비, 최대 높이의 모든 콤보를 시도했다가, 객체 맞는 나는 행운으로 생각할 수있는 등, 적어도 하나의 경우에는 실패합니다. 내가 본 대부분의 솔루션에는 하드 코딩 된 최대 너비 또는 높이 값이 포함됩니다. 위의 모든 사례를 CSS 및 동적 크기의 div 컨테이너에서만 사용할 수 있습니까?
PS 내 목표 브라우저가 차이가 나는 경우 Edge입니다.
고맙습니다!
여기에 한 가지 방법이 있습니다.
은 ( https://jsfiddle.net/mghgsk5e/ 바이올린 참조),background-size: contain를 포함하도록 배율을 설정
background-size 속성을 사용하여 다음
background: url(path/to/image)를 사용하고 CSS의 배경 이미지를 적용.
옵션 1이 충족되지 않습니다. 업 스케일링의 요구 사항, 오직 다운. –
당신은 맞습니다 @ 르 로이, 내 나쁜 편집 대답. –
감사합니다. Mathias! 귀하의 예제를 확장하고 Edge에서 테스트했습니다 : https://jsfiddle.net/rambutan2000/q4kr4z1r/ 모든 사례가 효과적입니다. – Geordie
모든 최신 브라우저의 경우 ,Edge 및 모든 버전의 Internet Explorer에서 CSS 속성 object-fit을 사용할 수 있습니다.
예 : https://jsfiddle.net/09cpe9e0/1/
나는 안전 할 경우에만 CSS 버전을 떠나, 나중에 제거 할 수 Internet Explorer 및 에지를위한 자바 스크립트 솔루션을 구현하는 경향 될 것이다.
감사합니다 Le-roy, 단지 100 % 명확한 것입니다. CSS가있는 객체를 사용하지 않고 모든 케이스를 처리 할 수있는 방법이 없습니까? – Geordie
나는 아무것도 찾지 못했고 온라인에서 찾은 다른 사람도 없었습니다. 비표준 해킹을 찾는 것이 가능할 수도 있지만 가능하다면 그 경로를 사용하지 않는 것이 좋습니다. –
모든 사례의 예를 여기에 추가했습니다. https://jsfiddle.net/rambutan2000/8rmvp8a7/ – Geordie
간단한 슬라이드 쇼를 제작했기 때문에 질문을했습니다. 이제 모든 것이 작동하는 예제가 있습니다 (Edge 및 Chrome) https://jsfiddle.net/rambutan2000/vvsnus6o/ – Geordie
백그라운드 '해킹'이 없으며 Edge에서 부분적으로 작동하는 예는 다음과 같습니다. https://jsfiddle.net/rambutan2000/tu2ps0go/ – Geordie