이미지가 자동으로 크기가 조절되어 이미지가 창에 맞게 표시됩니다.

Question

이미지가 많은 페이지 인 갤러리가 있습니다. 다른 건 없어.

그리고 브라우저 창의 크기에 따라 행의 이미지 수를 줄이고 크기를 줄이려고합니다.

지금 당장 행당 이미지가 고정 된 경우 숫자가 고정됩니다. 브라우저 창 (1770px)로

imgSize = documentWidth/18; 

이 넓은 98.3px 한 행에 18 개 이미지를 생성합니다. 하지만 사용자 창이 내 것보다 훨씬 작은 경우 962 픽셀이라고 가정 해 보겠습니다. 이미지의 너비는 53.4 픽셀로 작아집니다. 나는 100px 주위에 그들을 원한다.

그래서 창 크기가 X이고 이미지가 120px보다 크고 80px보다 작을 수없는 경우 한 행에 몇 개의 이미지가 들어갈 수 있는지 계산해야합니다.

Answer 1

창 크기를 80으로 나누고 반올림합니다.

Answer 2

Responsive design은 사용자가하려는 것을 처리합니다. 미디어 쿼리를 사용하여 창의 너비에 따라 다른 수의 열을 지정합니다. 이는 이미지에 백분율 너비를 지정하여 수행됩니다. 그런 다음 이미지에 실제 너비를 제한하는 최소 너비와 최대 너비를 지정할 수 있습니다.