CSS에서 이미지의 너비와 높이를 설정하는 방법

그림은 웹 디자인에서 중요한 역할을 합니다. 그림의 너비와 높이를 적절하게 설정하면 웹 페이지를 더욱 아름답고 구조적으로 합리적으로 만들 수 있습니다. 그렇다면 CSS를 통해 이미지의 너비와 높이를 설정하는 방법은 무엇입니까?

먼저 HTML 코드에 그림을 삽입할 때 다음 사항에 주의해야 합니다.

1. alt 속성 사용: alt 속성은 삽입된 그림에 텍스트 설명을 추가하는 데 사용됩니다. 이미지가 로드되지 않는 경우 alt 속성은 사용자가 이미지의 내용을 이해하는 데 도움이 될 수도 있습니다.
2. 이미지의 너비와 높이 지정: 이미지의 너비와 높이를 설정할 때 HTML 태그의 너비와 높이 속성을 사용할 수 있습니다. 그러나 이 방법은 유연하지 않으며 다양한 크기의 장치에 대한 반응형 디자인을 달성할 수 없습니다.

따라서 CSS background-image 속성과 background-size 속성을 사용하여 이미지의 너비와 높이를 설정하는 것이 더 나은 선택입니다. 다음은 몇 가지 실용적인 CSS 팁입니다.

① 고정 너비 및 높이 설정

아래와 같이 CSS의 너비 및 높이 속성을 사용하여 이미지의 고정 너비 및 높이를 설정합니다.

.img{
  width: 300px; /*设置图片宽*/
  height: 200px; /*设置图片高*/
}

물론 그렇게 할 수도 있습니다. 약어로 설정:

.img{
  width: 300px; height: 200px; /*用“；”隔开即可*/
}

② 컨테이너에 따라 너비와 높이를 조정합니다

때로는 컨테이너의 크기가 변경됨에 따라 너비와 높이를 조정하도록 이미지를 구현해야 합니다. 이때 CSS의 background-size 속성을 이용하여 그 값을 "contain" 또는 "cover"로 설정할 수 있습니다.

"포함"은 이미지가 완전히 표시되지만 너비나 높이가 충분하지 않을 수 있음을 의미합니다.

"커버"는 이미지가 컨테이너를 채우지만 이미지가 완전히 표시된다는 것을 보장할 수 없음을 의미합니다.

아래와 같이:

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  background-size: contain; /*或者：background-size: cover;*/
}

3 이미지 크기를 비례적으로 조정합니다

이미지의 비율이 변경되지 않도록 하기 위해 백분율 값으로 "padding-top" 속성을 설정할 수 있습니다. 상위 컨테이너의 너비를 기준으로 이미지의 높이를 결정하여 비례적인 크기 조정을 달성합니다.

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  padding-top: 50%; /*比例数值等于图片的高/宽*100% */
  background-size: cover; /*铺满背景容器*/
}

위는 CSS 이미지의 너비와 높이를 설정하는 세 가지 일반적인 방법입니다. 유연한 사용을 통해 웹 디자인에서 이미지 표시를 쉽게 최적화하고 사용자 경험을 향상시킬 수 있습니다.

위 내용은 CSS에서 이미지의 너비와 높이를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!