CSS를 사용하여 종횡비를 유지하면서 이미지 크기 조정
이 간단한 가이드는 이미지 크기와 필요한 컨테이너에 따라 종횡비가 방해받지 않도록 웹 사이트에서 이미지를 설정하는 방법에 관한 것입니다. 먼저 이를 이해하기 위해 CSS 스타일을 살펴보겠습니다.
CSS를 사용하여 웹 페이지에 스타일 적용
CSS는 Cascading Style Sheet의 약자입니다. 캐스케이딩은 자식 요소에 대해 다른 스타일을 지정하지 않는 한 부모 요소에 적용된 스타일이 모든 자식 요소에 의해 자동으로 상속됨을 의미합니다.
CSS를 웹 사이트에 통합하는 방법에는 여러 가지가 있습니다.
- 인라인 CSS: HTML 요소에
style속성을 사용하고 해당 요소에 특별히 스타일 속성을 적용하는 것을 인라인 CSS라고 합니다. - 내부 스타일 시트: 웹 사이트의 한 페이지에만 스타일을 적용하려면 내부 CSS를 사용하십시오. 따라서 HTML 페이지의
<head>부분 안에<style>태그로 묶인 해당 페이지의 스타일 속성을 포함하십시오. - 외부 스타일 시트: 모든 웹사이트 페이지는 외부 CSS를 사용하여 스타일을 적용할 수 있습니다. 결과적으로 다양한 선택기 유형과 스타일 속성을 포함하는 스타일 시트를 만들고 모든 웹 사이트의 웹 페이지에 포함합니다.
CSS에는 이미지와 관련된 수많은 속성이 있습니다. 이러한 속성은 웹 사이트에서 이미지 크기, 색상, 위치 등을 조정합니다.
div 요소와 같은 일부 컨테이너에 웹 사이트에 이미지를 넣을 때 그 크기는 이미지 크기에 따라 다릅니다. 일부 이미지는 더 크고 일부는 더 작기 때문에 때때로 문제가 발생합니다. 이러한 이미지를 설정하기 위해 종횡비를 설정합니다.
CSS를 사용하여 이미지 종횡비 설정
요소의 너비와 높이 사이의 비율을 종횡비라고 합니다. 범용 비디오 형식은 4:3이며 두 가지 일반적인 비디오 종횡비는 16:9 및 3:2입니다(HD TV 및 디지털 TV에 보편적이고 YouTube 비디오에 대한 기본값).
종횡비를 설정하는 구문은 다음과 같습니다.
aspect-ratio: auto || <ratio>;
기본값, 즉 자동으로 설정하거나 폭:높이 비율을 지정하십시오. 다음은 의미와 함께 가능한 값입니다.
| 종횡비 | 설명 |
|---|---|
종횡비: 자동; |
이것이 기본값입니다. |
종횡비: 1/1; |
너비와 높이의 비율은 동일합니다. |
종횡비: 2/1; |
이미지의 너비는 높이의 두 배입니다. |
종횡비: 1/2; |
이미지의 너비는 높이의 절반입니다. |
종횡비: 16/9; |
비디오에 일반적으로 사용되는 비율입니다. |
종횡비: 0.5; |
비율은 float 값을 사용하여 지정할 수도 있습니다. |
종횡비: 상속; |
부모 요소의 종횡비를 상속합니다. |
종횡비: 초기; |
이는 기본값인 auto와 같습니다. |
종횡비: 설정되지 않음; |
요소에서 모든 종횡비를 제거합니다. |
이미지를 배치하고 종횡비를 설정하는 예를 고려하십시오.
<html>
<head>
<style>
.images{
aspect-ratio: auto;
width: 400px;
}
</style>
</head>
<body>
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
</body>
</html>
이 코드 세그먼트에서 이미지를 배치하고 클래스 선택기 이미지를 할당했습니다. 이 클래스는 종횡비를 자동으로 설정하고 너비를 400px로 지정한 CSS 클래스입니다.
자동 값의 경우 이미지 크기에 따라 높이가 자동으로 조정됩니다.
이제 종횡비를 다음과 같이 변경합니다.
.images{
aspect-ratio: 2 / 1;
width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
출력은 다음과 같습니다.
이 출력 화면에서 이미지의 높이가 너비의 절반임을 알 수 있습니다. 이제 높이가 너비의 두 배가 되도록 1 / 2 비율을 사용합니다.
.images{
aspect-ratio: 1 / 2;
width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
CSS를 사용하여 동일한 종횡비를 유지하면서 이미지 크기 조정
CSS를 사용하여 종횡비를 동일하게 유지하면서 이미지 크기를 조정할 수 있습니다. 예를 들어 크기가 428x428px인 다음 이미지를 고려하십시오.
종횡비를 유지하면서 CSS를 사용하여 위 이미지의 크기를 조정할 수 있습니다. 다음 예를 고려하십시오.
.images {
display: block;
max-width:250px;
max-height:90px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/DelftStack/logo.png" class = "images"/>
이 코드 세그먼트에서 CSS 클래스 선택기 이미지를 사용합니다. 이 클래스는 종횡비를 변경하지 않고 250x90px 크기로 이미지 크기를 조정합니다.
이 방법을 사용하면 웹 페이지의 필요와 요구 사항에 따라 종횡비를 설정할 수 있습니다.
동일한 종횡비로 이미지를 변경할 수도 있습니다. 이는 주로 모든 디스플레이 크기에 반응하는 웹 사이트를 만들기 위해 수행됩니다.