CSS로 이미지가 늘어나는 것을 방지하는 방법

CSS 기술은 웹 디자인에서 매우 중요한 역할을 합니다. CSS를 통해 웹 페이지 스타일의 모든 측면을 제어할 수 있을 뿐만 아니라 아름답고 질서 있고 완전한 기능을 갖춘 웹 페이지 효과를 얻을 수 있습니다. 그 중 사진의 표시와 제어는 우리가 가장 관심을 갖고 숙달해야 할 기술 중 하나이다. 많은 경우 이미지를 늘리거나 압축하는 대신 웹 페이지의 디자인 요구 사항에 따라 나타나도록 해야 합니다. 이 경우 이를 달성하려면 CSS 기술을 사용해야 합니다.

우선, 이미지 크기와 관련된 몇 가지 기본 개념을 이해해야 합니다. 웹 페이지에서 이미지가 차지하는 공간은 너비와 높이라는 두 가지 차원을 갖습니다. 따라서 이미지의 너비와 높이 속성을 설정해야 합니다. CSS에서는 이 두 속성이 각각 너비와 높이에 해당합니다.

예를 들어 다음 CSS 코드를 사용하여 이미지 너비를 300px, 높이를 200px로 만들 수 있습니다.

img{
    width: 300px;
    height: 200px;
}

위 코드는 모든 img 태그에 적용할 수 있으며 너비와 높이를 300px과 200px로 설정할 수 있습니다. 이로 인해 이미지의 실제 크기에 관계없이 웹 페이지에서는 이미지가 300px 및 200px로 늘어나거나 압축됩니다.

그러나 많은 경우 이미지를 늘리거나 압축하는 것이 아니라 원래 비율과 크기를 유지하는 것을 원합니다. 이 시점에서 우리는 몇 가지 다른 방법을 사용해야 합니다.

첫 번째 방법은 이미지의 최대 너비와 최대 높이를 설정하는 것입니다. 그 결과 그림의 크기가 최대 너비 및 최대 높이보다 작으면 원본 크기에 따라 렌더링되고 그림 크기가 최대 너비 및 최대 높이보다 크면 렌더링됩니다. 최대 너비와 최대 높이에 맞을 때까지 비례적으로 감소됩니다.

예를 들어 다음 CSS 코드를 통해 이미지의 최대 너비를 300px로, 최대 높이를 200px로 설정할 수 있습니다.

img{
    max-width: 300px;
    max-height: 200px;
}

위 코드는 이미지의 실제 크기에 관계없이 이미지의 최대 너비를 200px로 설정합니다. 늘어나거나 압축되지 않고 최대 너비와 최대 높이에 맞춰 원래 비율과 크기를 유지합니다.

두 번째 방법은 이미지 크기를 적응형으로 설정하는 것입니다. 그 결과 이미지의 크기는 컨테이너의 크기에 따라 자동으로 조정되고 비율은 변경되지 않습니다.

예를 들어 다음 CSS 코드를 통해 이미지의 너비와 높이를 100%로 설정할 수 있습니다.

img{
    width: 100%;
    height: auto;
}

위 코드에서는 너비를 100%로, 높이를 자동으로 설정했습니다. 컨테이너의 너비는 자동으로 조정되고 높이는 원래 비율을 변경하지 않고 유지하기 위해 너비의 변화에 ​​따라 자동으로 계산됩니다.

요약하자면, 이미지 크기를 제어해야 할 때는 최대 너비 및 최대 높이 속성을 사용하거나 크기를 적응형으로 설정하는 데 우선순위를 두어야 합니다. 이러한 방법을 사용하면 이미지의 표시 효과가 늘어나거나 압축되어도 영향을 받지 않고 원래 비율과 크기를 유지하여 웹 페이지 표시를 더욱 아름답고 편안하게 만들 수 있습니다.

위 내용은 CSS로 이미지가 늘어나는 것을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!