비디오: [HTML] img 태그 - 이미지 크기 조정 2024
웹 페이지 디자이너는 이미지를 사용하여 중요한 정보를 제공하고 사이트 탐색을 직접 수행하며 전반적인 웹 페이지의 모양과 느낌. 그러나 이미지를 올바르게 사용해야하거나 효과를 저하시킬 수 있습니다.
높이와 너비 속성을
Brass
대부분의 브라우저는 페이지 그래픽을 다운로드하기 전에 페이지와 연관된 HTML과 텍스트를 다운로드합니다. 사용자가 전체 페이지를 다운로드 할 때까지 기다리는 대신 브라우저는 일반적으로 텍스트를 먼저 표시 한 다음 그래픽이 제공 될 때마다 그래픽을 채 웁니다.
브라우저에 그래픽 크기가 얼마나 큰지 알려주면 브라우저는 페이지 디스플레이에서 해당 위치를 예약 할 수 있습니다. 이렇게하면 웹 페이지에서 그래픽 및 기타 자료를 채우는 속도가 빨라집니다.
이미지 편집 프로그램이나 Windows 및 Mac OS에 내장 된 이미지 뷰어에서 이미지의 폭과 높이를 픽셀 단위로 확인할 수 있습니다. (Windows 또는 Mac OS에서 이미지의 속성을보고 높이와 너비를 볼 수도 있습니다.)
높이 및 너비 속성을 사용하는 또 다른 좋은 방법은 페이지에 색상 줄을 만드는 것입니다. 그냥 작은 색깔의 광장. 예를 들어이 마크 업은 웹 페이지에 10-x-10-px 청색 상자를 추가합니다.
일반적으로 테스트 중에 결과를 신중하게 확인하는 것이 좋지만 일반적으로 이러한 속성을 사용하여 이미지 크기를 줄이는 것이 안전합니다. 모든 종류의 종횡비 이미지를 사용하면 원본 치수를 일반적인 값으로 나눠서 종횡비를 유지하려고합니다.
이 그림에는 크기가 20 x 20 및 50 x 50 픽셀 인 상자도 나와 있습니다. 다음은 다른 두 개의 상자를 생성하기 위해 마크 업에서 높이와 너비의 값을 변경 한 것입니다.
이 기술을 사용하면 하나의 이미지를 파란색 상자 (2. 39K 크기 만)와 같이 다양한 이미지로 변환 할 수 있습니다 선 및 짝수 칸:
-
이 기법을 사용하면 페이지의 모든 구분선과 테두리 요소가 모두 같은 그래픽을 기반으로하므로 동일한 색상을 사용할 수 있습니다.
-
파란색 선을 모두 녹색으로 변경하려면 이미지 만 변경하면됩니다. 만든 모든 선이 색을 바꿉니다.
이미지의 높이와 너비를 이미지의 실제 높이와 너비와 다르게 지정하면 이미지 표시의 크기를 조정할 때 브라우저를 사용하게됩니다.이 트릭은 단색 이미지 (예: 파란색 상자)에 적합하지만 여러 색상의 이미지 나 실제 사진이 포함 된 이미지에는 적합하지 않습니다.
브라우저에서 이미지의 크기가 잘 맞지 않고 왜곡 된 그림이 생깁니다. 이 그림은 마크 업이 이미지 높이에 4를 곱하고 너비에 2를 곱하면 브라우저가 트럼펫 이미지를 확대 처리하는 것을 나쁘게 보여줍니다 (flugelhorn과 흡사합니다!):
Brass
동일한 이미지 - 로고 또는 탐색 버튼과 마찬가지로 - 큰 이미지를 해당 그래픽의 마스터로 사용하고 더 작은 버전을 만듭니다. 이 트릭을 사용하면 각 이미지의 최종 모양과 느낌을보다 잘 제어 할 수 있습니다.
