제목은 모든 것을 말해줍니다. height: 100%몇 가지 display: inline-block <li>요소 각각 내부에 이미지가 있습니다 . 컨테이너가 position: static. 모든 것이 복숭아입니다. 내가가 변경할 때 position: absolute/fixed의 <li>요소가 아니라 이미지 자체가 올바른 차원이 폭에도 불구하고 축소, 원본 이미지의 폭을 얻는다.
이것은 Chrome에서 예상대로 작동하지만 Firefox에서는 중단됩니다.
누구든지이 행동을 만났습니까? 더 중요한 것은 JS없이 고칠 수 있습니까?
배경 : position: fixed뷰포트의 하단 20 %를 덮는 이미지 썸네일로 화면에 맞는 반응 형 갤러리를 만들고 있습니다.
격리 된 데모 (버튼을 클릭하여 위치 전환 : static / fixed) : http://jsfiddle.net/TomasReichmann/c93Xk/
마침내 작동하게되었습니다. 당신이 무언가를 선언 할 때 Position:fixed, left: 0; top: 0; right: 0; bottom: 0;오직 chrome만이 그것을 "명시 적으로 정의 된 차원"으로 인식하는 것 같습니다 . 높이를 추가하면 : 100 %; 다른 브라우저가 따라 잡았습니다. 다행히도 height 100%아래의 콘텐츠가 뷰포트를 넘쳐도 레이아웃이 깨지지 않았습니다.
창 크기를 조정하려고 할 때 모든 브라우저에서 여전히 균일하게 중단됩니다. 나는 JS로 손으로 너비를 계산해야 할 것 같다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다