CSS에서 크기를 조정할 때 이미지 종횡비를 유지하는 방법은 무엇입니까?

CSS의 이미지 크기 조정 문제 해결

관리자 패널에서 이미지 크기 조정 문제가 발생하면 CSS 속성의 상호 작용을 이해하는 것이 중요합니다. 처음에 완벽하게 표시되는 이미지의 크기를 조정할 때 이러한 문제 중 하나가 발생합니다. 그러나 브라우저 크기를 조정하면 이미지가 불균형적으로 줄어듭니다.

이 문제를 해결하려면 이미지의 가로 세로 비율을 유지하는 것이 중요합니다. 이는 한 치수를 고정하고 다른 치수는 자동 조정하도록 허용하는 것을 의미합니다. 너비를 고정하고 높이를 자동으로 설정하면 이미지의 원래 비율이 유지됩니다.

예를 들어 다음 코드 조각을 고려해 보세요.

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-width: 100%;
  width: 100px;
  height: 100px;
}
.correct img {
  max-width: 100%;
  width: 200px;
  height: auto;
}

이 예에서 ". 올바른" 클래스는 너비를 고정 값(200px)으로 설정하고 높이를 자동으로 조정하여 종횡비를 유지합니다. 이렇게 하면 크기를 조정할 때 이미지가 늘어나지 않습니다.

반대로 ".incorcor" 클래스를 사용하면 너비와 높이가 모두 고정되므로 이미지가 늘어납니다. 이로 인해 가로 세로 비율이 깨지고 이미지의 원래 크기가 손실됩니다.

적절한 CSS 속성을 사용하면 브라우저 창 크기에 관계없이 이미지 크기가 적절하게 조정되고 시각적 무결성이 유지되도록 할 수 있습니다.

위 내용은 CSS에서 크기를 조정할 때 이미지 종횡비를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!