반응 형 웹 페이지에서 이미지의 크기를 찾는 방법은 무엇입니까?

Question

나는 그래픽 디자이너로 일하고 있습니다. 그들은 한 페이지에 몇 가지 슬라이더 이미지를 디자인하길 원했습니다. 그러나 아무도 치수를 모른다. 페이지를 검사 할 때 이미지에 대해 4 가지 크기가 있음을 확인했습니다.

대형 중간 작은 XSMALL

그래서 휴대 전화 XSMALL 이미지 appears..etc으로 웹 사이트를 입력 할 때.

나는 눈금자와 반응하는보기 확장을 시도했다. 그러나 그것은 나를 도와주지 않았다.

정확한 치수는 어떻게 찾을 수 있습니까?

Answer 1

정확한 단계는 사용중인 브라우저에 따라 다를 수 있습니다. 다음은 Chrome에 대한 몇 가지 안내입니다 (다른 브라우저에서도 비슷합니다).

• 가장 작은 크기로 이미지를 가져 오도록 창의 크기를 조정하십시오.
• 이미지를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"
• "계산 된"탭이 표시됩니다. 이 이미지에 대해 계산 된 CSS 속성을 나타냅니다. 이보기에서 픽셀 단위로 높이와 너비를 읽을 수 있습니다.
• 창 크기를 조정하고 각 이미지 크기에 대해이 작업을 반복하십시오.

더 진보 된 방법은 : 그들이 반응 형 웹 디자인을 구현하는 방법에 따라, 당신은 페이지를로드하는 CSS를 볼 수 있습니다, 그리고 뷰포트에 따라 이미지의 크기를 제어 @media 쿼리를 찾아 브라우저. @mediahere에 대해 자세히 알아보십시오.