HTML에서 이미지 크기를 변경하는 방법

웹 디자인에서 사진은 웹사이트의 아름다움을 높이고 사용자의 관심을 끌 수 있는 매우 중요한 요소입니다. 대부분의 경우 최상의 효과를 얻으려면 이미지 크기를 수정해야 합니다. 이 글에서는 주로 HTML을 사용하여 이미지 크기를 수정하는 방법을 소개합니다.

HTML에는 이미지 크기를 수정하는 두 가지 일반적인 방법이 있습니다. img 태그의 너비 및 높이 속성을 사용하는 것과 CSS 스타일을 사용하는 것입니다. 하나씩 소개해보자.

img 태그의 width 및 height 속성을 사용합니다

img 태그는 HTML에 이미지를 삽입하는 데 사용되는 태그입니다.

<img src="image.jpg" alt="图片" />

그 중 src 속성은 경로를 지정하는 데 사용됩니다. 이미지의 경로를 지정하는 데 alt 속성이 사용됩니다. 이제 너비 및 높이 속성을 통해 얻을 수 있는 이미지 크기를 수정해야 합니다. 이 두 속성은 이미지의 너비와 높이를 지정할 수 있으며 단위는 픽셀(px), 백분율(%) 또는 em(상위 요소에 대한 글꼴 크기의 배수)일 수 있습니다.

예는 다음과 같습니다.

<img src="image.jpg" alt="图片" width="200px" height="150px" />

이 코드는 이미지 너비를 200픽셀로, 높이를 150픽셀로 설정합니다. 속성 중 하나만 설정하면 다른 속성은 원본 이미지의 비율에 따라 자동으로 조정되어 이미지가 늘어나거나 압축되지 않습니다.

CSS 스타일 사용

img 태그의 너비 및 높이 속성을 사용하는 것 외에도 CSS 스타일을 사용하여 이미지 크기를 수정할 수도 있습니다. 이것의 장점은 하나의 스타일시트에서 모든 이미지의 크기를 균일하게 제어할 수 있어 반복되는 코드를 줄일 수 있다는 점입니다.

CSS를 사용하여 이미지 크기를 수정하려면 img 태그에 대한 클래스를 정의한 다음 CSS에서 해당 스타일을 설정해야 합니다. 다음은 그 예입니다.

<img src="image.jpg" alt="图片" class="picture" />

.picture {
  width: 200px;
  height: 150px;
}

이 코드는 img 태그에 class 속성을 추가하고 CSS에서 .picture 클래스를 정의하여 이미지 크기를 수정하는 효과를 얻습니다. CSS 스타일이 적용되도록 하려면 스타일 시트를 웹 페이지에 연결해야 합니다.

동시에 백분율을 사용하여 이미지 크기를 설정할 수도 있습니다. 예:

.picture {
  width: 50%;
  height: 50%;
}

이 코드는 이미지 크기를 원래 크기의 절반으로 설정하므로 반응형 디자인을 쉽게 구현하고 이에 적응할 수 있습니다. 다양한 화면 크기의 장치.

요약

웹 디자인에서는 이미지 크기를 변경하는 것이 일반적인 요구 사항입니다. img 태그나 CSS 스타일의 너비 및 높이 속성을 사용하여 이 기능을 쉽게 구현할 수 있습니다. 웹페이지의 성능을 보장하려면 적절한 이미지 크기를 사용하여 사용자 경험에 영향을 미칠 수 있는 지나치게 큰 이미지를 로드하지 않는 것이 가장 좋습니다.

위 내용은 HTML에서 이미지 크기를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!