반응 이미지 리플 로우

Question

우리는 사용자가 이미지를 업로드 할 수있는 반응 형 사이트를 개발하고 있습니다.

원본을 보존 한 다음 해상도가 낮은 사용자에게 제공 할 미리보기 이미지를 생성합니다.

제기 된 문제는 작은 화면 크기의 논리에서 이미지를 전환 할 때 주위에 요소가 눈에 띄게 다시 흐릅니다.

이미지의 높이가 일치하지 않아이를 방지하는 방법이 확실치 않아 포함 요소에 초기 높이를 설정할 수 없습니다.

모든 아이디어를 얻을 수 있습니다.

나는이 바라 보았다 :

http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

을하지만 단지 우리가 비율 즉 16 알 시나리오 것 같다 : 나는 당신의 축소판이 있다고 가정 3 등

Answer 1

: 9, 4 고정 된 최대 크기.

방향 (가로, 세로, 정사각형)이 중요하지 않도록 최대 높이/너비가 설정된 상자 안에 이미지를 넣을 수 있습니다. 이렇게하면 이미지 주위에 고정 된 공백이 생깁니다.

축소판에이 공백을 생성하여 모든 이미지에서 고정 너비/높이를 부여 할 수도 있습니다.