이 수업은 우리가 고려한 이전 수업의 일종의 연속입니다. 이제 지식을 심화하고 볼 시간입니다. CSS 속성이미지.
CSS의 이미지 크기
여기서 새로운 점을 봅시다. 이미지의 크기를 설정하는 img 클래스를 만들었습니다. width는 너비, height는 우리의 높이입니다. 이미지가 어떻게 생겼는지 명확하게 볼 수 있도록 원본보다 크기를 더 표시했습니다. 바뀔 것이다.
명확성을 위해 많은 텍스트가 있는 예를 보여 드리겠습니다. 그러면 이미지의 들여쓰기가 무엇인지 알 수 있습니다. 이 예우리는 능력을 평가할 기회를 줄 margin 속성을 사용할 것입니다.
명확성을 위해 많은 텍스트가 있는 예를 들겠습니다. 이 예에서 이미지의 들여쓰기가 무엇인지 알 수 있습니다. 차이점을 명확하게 볼 수 있도록 들여쓰기를 설정하지 않은 이미지를 사용합니다.
브라우저에서 다음을 볼 수 있습니다.
이 예에서는 20픽셀의 네 모서리 모두에서 들여쓰기를 제공하는 margin 매개변수 덕분에 이미지에서 들여쓰기를 했습니다. 여기에서 더 까다로운 조작을 수행할 수 있습니다. 예를 들어 다음과 같이 특정 가장자리에서 들여쓰기를 설정할 수 있습니다.
- margin-top - 위쪽에서 여백
- margin-right - 오른쪽에서 여백
- margin-bottom - 아래쪽에서 여백
- margin-left - 왼쪽에서 여백
따라서 여기에서 모든 것을 더 미세하게 조정하거나 다른 쪽을 건드리지 않고 한쪽 또는 양쪽에서 들여쓰기를 설정할 수 있습니다.
브라우저에서:
테두리 매개 변수 덕분에 이미지 주위에 프레임을 설정합니다. 먼저 border-width를 사용하여 프레임의 너비를 설정하고 픽셀 단위로 설정한 다음 프레임의 스타일, 즉 테두리 스타일의 모양을 설정합니다. 선택할 수있는 몇 가지 값입니다.
그리고 우리가 조정할 마지막 매개변수는 border-color 매개변수에 의해 설정되는 테두리의 색상입니다.
브라우저에서 다음을 볼 수 있습니다.
아시다시피, 태그 선택기 덕분에 본문 태그에 배경을 할당했습니다. 배경이 전체 문서를 차지하기 때문에 다른 태그에도 할당할 수 있습니다. background 매개변수는 배경을 그림으로 만들었으며 괄호 안에 주소를 적었습니다. 다음과 같이 배경을 조작할 수도 있습니다.
배경: url(proba.png) 반복 x;
배경은 X축을 따라, 즉 한 줄에서 수평으로만 반복됩니다.
배경: url(proba.png) 반복-y;
배경은 Y축을 따라, 즉 한 줄에서 수직으로만 반복됩니다.
배경: url(proba.png) 반복 없음;
배경은 반복되지 않지만 하나의 이미지만 나타납니다.
배경 크기: 500px 200px;
그것 추가 매개변수이미지의 배경 크기, 너비 및 높이를 설정하는 A입니다.
CSS를 사용한 이미지 투명도
브라우저에서 다음을 볼 수 있습니다.
이 속성은 CSS3의 출현과 함께 제공되었으며 실제로 상당히 광범위하게 사용되었습니다. opacity 매개변수를 사용하여 구현하면 이미지의 투명도, 0에서 1 사이의 값, 두 번째 필터 매개변수: alpha(Opacity=50); 에 대해 동일한 작업을 수행합니다. 인터넷 브라우저이전 버전은 0에서 100까지의 값인 opacity 매개변수를 지원하지 않기 때문에 Explorier입니다. 이 예에서는 차이점을 명확하게 볼 수 있도록 특별히 두 개의 이미지를 만들었습니다.
이것으로 CSS 이미지 속성 강의를 마치겠습니다. 이 강의가 여러분에게 유용하고 언어를 더 공부하고 새로운 지식을 얻는 데 영감을 주셨기를 바랍니다.
발행일: 2014-04-22
이미지는 거의 모든 사이트의 구성 요소이므로 크기 조정은 필수입니다. 이미지 크기를 조정하는 방법에는 2가지가 있습니다. 그래픽 편집기또는 프로그래밍 방식으로 HTML 코드 CSS에.
만약에 CSS 코드 html에서 이미지의 크기를 설정하지 않으면 사이트의 높이와 너비가 픽셀 단위로 동일합니다. 소스 파일. 즉, css, html 없이도 그래픽 편집기만 있으면 이미지 크기를 조정할 수 있으며, 크기를 지정하지 않으면 사이트에서 자동으로 변경됩니다. 그러나 css의 이미지 크기를 html로 프로그래밍 방식으로 변경해야 하는 경우가 있습니다.
1. 그래픽 편집기에서 그림 변경
모든 그래픽 편집기(포토샵, 김프, xnview)에서 이미지의 크기를 변경할 수 있으며 원본 크기에 따라 사이트에서 자동으로 변경됩니다.
방법의 장점:
추가 데이터(픽셀)를 다운로드할 필요가 없기 때문에 그림이 더 빨리 로드되며, 이 데이터는 프로그래밍 방식으로 압축됩니다.
빼기:
그래픽 편집기는 너비와 높이가 200픽셀 미만인 이미지를 제대로 압축하지 않습니다.
가능하고 적절할 때마다 그래픽 편집기에서 크기를 조정하여 프로그래밍 방식으로 크기를 조정할 때보다 사진이 더 빨리 로드되도록 하십시오. 속도의 차이는 수십 배일 수 있습니다.
2. 사이트의 CSS 코드에서 이미지 변경
장점:
더 빠르고 편리하게 사이즈를 설정할 수 있습니다. 이 방법이미지 축소는 일반적으로 편의상 사용됩니다. 예를 들어, 하나의 사진이 다양한 크기를 가질 수 있는 경우 그래픽 편집기에서 편집한 한 이미지의 모든 형식을 업로드하는 것보다 프로그래밍 방식으로 동일한 사진의 값을 변경하는 것이 더 편리한 경우가 많습니다.
그래픽 편집기와 달리 높이 또는 너비가 200픽셀 미만인 작은 사진을 정성적으로 압축합니다. 사이트의 이미지 크기를 200px 미만으로 하고 싶다면 원본 크기를 30-50%(260-300px) 크게 하여 저장하는 것이 좋습니다. 양질감소할 때.
동시에 작은 이미지는 공간을 거의 차지하지 않고 크기를 30% 늘려도 변화를 느끼지 못하기 때문에 사이트 로딩 속도의 차이는 느껴지지 않습니다. 그러나 품질의 차이를 확인하십시오.
빼기:
프로그래밍 방식으로 압축된 사진은 원본 버전을 다운로드한 후에만 크기 조정이 이루어지기 때문에 로드하는 데 시간이 더 오래 걸립니다. 따라서 이미지 크기가 너비 또는 높이가 200픽셀 이상인 경우 사이트가 더 빨리 작동하도록 그래픽 편집기에서 압축하는 것이 좋습니다.
CSS를 사용하여 html 이미지 크기를 조정하는 방법
html에서 이미지 크기를 조정하려면 CSS속성이 사용됩니다 너비(너비) 및 높이(높이)스타일 속성 내부. 너비 또는 높이만 쓸 수 있으며, 나머지 지정되지 않은 값은 그림의 가로 세로 비율을 유지하면서 자동으로 변경됩니다. 예를 들어 너비를 사용하여 이미지의 너비만 지정하면 가로 세로 비율을 유지하면서 높이가 자동으로 변경됩니다. 그리고 그 반대로 높이(높이)만 지정하면 너비도 자동으로 변경되어 이미지의 종횡비를 유지합니다.
이미지 크기를 지정하지 않은 코드 예제
브라우저의 결과
페이지 코드
.css에서 이미지 크기 조정이 있는 예제 코드
브라우저의 결과
페이지 코드
스타일="너비:150픽셀; ">
위의 두 예는 모두 300x184px(너비 및 높이) 크기의 동일한 이미지를 사용합니다. 1 예에서는 css에 너비와 높이가 지정되지 않았기 때문에 이미지가 원본 크기 300x184px로 변경 없이 브라우저에 표시되었습니다. 그리고 두 번째 예에서는 너비가 150px이므로 높이가 자동으로 92px로 변경되었으므로 브라우저에 그림이 2배 축소되어 표시되었습니다. 보시다시피 height 속성은 너비에 비례하여 자동으로 변경되기 때문에 전혀 지정하지 않을 수 있습니다.
두 가지 옵션을 모두 제공하는 경우: 너비(너비), 높이(높이)비율과 일치하지 않으면 그림은 정확히 그 크기를 갖지만 값에 따라 압축되거나 늘어난 형태로 나타납니다.
사진을 확대하는 것이 바람직하지 않은 이유
중요: 이미지 크기를 늘리면 품질이 저하됩니다. 어떤 식 으로든 변경할 때 원본 이미지보다 값을 작게 설정하는 것이 중요합니다. 즉, 줄이는 것뿐입니다.
픽셀 크기를 원본 이미지보다 크게 설정하면 화질이 저하됩니다. 컴퓨터는 새 픽셀을 추가할 수 없고 기존 픽셀의 크기만 늘릴 수 있기 때문에 품질 손실이 명확하게 표시됩니다. 원래 값에서 이미지 배율이 클수록 품질이 떨어지고 정사각형 픽셀이 더 선명하게 보입니다.
태그에 HTML을 사용하여 그림 크기를 조정하려면 너비(너비) 및 높이(높이) 속성이 제공됩니다. 픽셀이 값으로 사용되며 인수는 이미지의 물리적 치수와 일치해야 합니다. 예를 들어, 그림. 10.6은 100x111 픽셀 크기의 이미지를 보여줍니다.
쌀. 10.6. 원본 크기 사진
따라서 이 그림을 배치하기 위한 HTML 코드는 예제 10.4에 나와 있습니다.
예 10.4. 도면 치수
이미지의 크기가 명시적으로 지정되면 브라우저는 이를 사용하여 문서를 로드하는 동안 이미지에 해당하는 빈 영역을 표시합니다(그림 10.7). 그렇지 않으면 브라우저는 이미지의 너비와 높이를 변경하기 전에 이미지가 완전히 로드될 때까지 기다립니다(그림 10.8). 이 경우 처음에는 그림의 크기를 알 수 없고 자동으로 작게 설정되어 있기 때문에 텍스트 재포맷이 발생할 수 있습니다.
쌀. 10.7. 이미지의 크기가 지정되지 않았으며 아직 로드되지 않았습니다.
쌀. 10.8. 이미지 업로드됨, 텍스트 형식 변경됨
이미지의 너비와 높이를 위아래로 변경할 수 있습니다. 그러나 이것은 파일 크기가 변경되지 않은 상태로 유지되기 때문에 어떤 식으로든 사진의 다운로드 속도에 영향을 미치지 않습니다. 그러므로 주의해서 이미지를 줄이십시오. 이것은 독자들 사이에 혼란을 일으킬 수 있습니다. 왜 그러한 작은 그림을 로드하는 데 시간이 오래 걸리는지 알 수 있습니다. 그러나 크기를 늘리면 반대 효과가 나타납니다. 이미지의 크기는 크지만 동일한 크기의 이미지에 비해 파일이 더 빨리 로드됩니다.
무화과에. 10.9는 그림과 같은 이미지를 보여준다. 10.6이지만 너비와 높이가 두 배입니다.
쌀. 10.9. 브라우저에서 확대된 이미지 보기
이러한 도면에 대한 코드는 거의 변경되지 않은 상태로 유지되며 예제 10.5에 나와 있습니다.
예 10.5. 사진 크기 조정
이러한 크기 조정을 리샘플링이라고 하며 브라우저 알고리즘은 그래픽 편집기에 비해 성능이 떨어집니다. 따라서 특별한 경우에만 이러한 방식으로 이미지를 증가시켜야 합니다. 그렇지 않으면 이미지 품질이 너무 많이 저하됩니다. 일종의 그래픽 프로그램을 사용하는 것이 좋습니다. 직사각형 영역이 포함된 도면은 예외입니다. 무화과에. 그림 10.10은 54바이트를 사용하고 최대 150픽셀로 확장된 8 x 8픽셀의 원래 크기를 갖는 패턴 파일을 보여줍니다.
쌀. 10.10. 확대 이미지
브라우저는 리샘플링을 위해 쌍입방(매끄러운 가장자리와 부드러운 색조 범위 제공) 및 가장 가까운 점(원래 색상 및 선명한 가장자리 유지)의 두 가지 알고리즘을 사용합니다. 최신 버전의 브라우저는 쌍입방 알고리즘을 사용하는 반면 이전 브라우저는 가장 가까운 점 알고리즘을 사용합니다.
지침
먼저 검색 엔진을 사용하여 사진을 찾아보십시오. 검색어를 입력한 후 검색 설정 탭을 선택하세요. 예를 들어 Google에는 "검색 도구" 버튼이 있고 Yandex에는 슬라이더가 있는 아이콘이 있습니다. 항목 "크기"를 선택하고 정확한 값을 지정해야 합니다. 또는 예를 들어 좋은 해상도의 사진이 필요한 경우 "크게"를 선택합니다.
원하는 크기의 사진이 없으면 프레임에 맞게 직접 조정할 수 있습니다. 방법이 있습니다. 첫 번째는 먼저 원하는 크기의 문서를 만든 다음 그림을 변경하는 것입니다. 두 번째는 반대입니다. 사진을 열고 크기를 변경하십시오. 본질적으로 차이는 없습니다. 모두 귀하의 선호도와 목표에 달려 있습니다. 예제는 Adobe Photoshop에서 고려되지만 다른 그래픽 편집기를 사용할 수 있습니다.
첫 번째 방법입니다. "파일" - "만들기 ..." 또는 키 조합 Ctrl + N을 클릭합니다. 설정이 있는 창이 눈앞에 나타납니다. 여기에서 너비, 높이 및 필요한 색상 해상도 매개변수를 지정합니다. 그런 다음 브라우저에서 원하는 이미지를 열고 마우스 오른쪽 버튼을 클릭하고 "이미지 복사"를 선택합니다. 그런 다음 프로그램으로 돌아가서 Ctrl + V 조합을 누릅니다.
그림이 그래픽 편집기 창에 나타납니다. 그런 다음 "편집" - "자유 변형" 또는 Ctrl + T 조합을 클릭합니다. 작업 창의 크기에 이미지를 맞출 수 있는 키 포인트가 나타납니다. 원하는 결과를 얻 자마자 (그런데 작업 영역의 경계를 넘어 갈 수 있음) "파일"- "다른 이름으로 저장 ..."또는 키 조합 Ctrl + S를 클릭하십시오.
두 번째 방법입니다. 먼저 컴퓨터로 이동한 다음 "파일" - "열기 ..."(또는 Ctrl + O 조합)를 클릭하고 원하는 이미지를 선택해야 합니다. 그런 다음 "이미지" - "이미지 크기 ..."를 선택하거나 Alt + Ctrl + I을 누릅니다. "종횡비 유지"의 선택을 취소하고 원하는 크기를 선택하십시오. 그런 다음 확인 키를 누릅니다.
사진은 종이 인쇄 표준에 따라 센티미터(밀리미터, 인치) 단위의 지정된 크기와 DPI 단위의 지정된 크기에 따라 크기가 조정됩니다. cm, mm 및 인치 단위의 치수는 1000분의 1의 정확도로 지정할 수 있습니다. 예를 들어 15x10 형식 대신 15.201x10.203 cm를 설정할 수 있습니다.
세로(세로) 위치의 표준 사진 크기 표:
| 센티미터(cm)의 사진 형식 | 밀리미터(mm) 단위의 크기 | 크기(픽셀) (인쇄용 300dpi) |
종횡비 (가로 방향으로) |
| 3x4 (수동 절단 후) | 30x40 | 354x472 | 4:3 (1.33) |
| 3.5x4.5 (수동 절단 후) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10x15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203x305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
표준 용지 크기 A4 형식- 300dpi에서 21x29.7cm 또는 2480x3508픽셀. 다른 시트 형식의 치수는 Wikipedia 페이지에서 볼 수 있지만 치수가 밀리미터와 인치로 나열되어 있다는 것을 잊지 마십시오. 이 페이지의 설정에서 적절한 값을 선택해야 합니다.
DPI(인치당 도트 수)를 고려하지 않고 사진의 크기를 조정해야 하는 경우, 즉 지정된 형식의 비율만 고려하는 경우 이를 위해 "DPI의 크기" 매개변수를 "0"으로 설정해야 합니다. 설정.
원본 이미지는 어떤 식으로든 변경되지 않습니다. 다른 처리된 사진이 제공됩니다.