이미지 적응형 너비 및 높이를 구현하는 CSS-프런트엔드 Q&A-php.cn

이미지 적응형 너비 및 높이를 구현하는 CSS

WBOY

풀어 주다： 2023-05-29 10:49:37

원래의

7867명이 탐색했습니다.

인터넷의 발달로 사진은 우리 일상생활에서 피할 수 없는 부분이 되었습니다. 웹사이트 디자인에 있어 사진을 활용하면 웹사이트를 더욱 아름답고 생생하게 만들 수 있습니다. 그러나 이미지의 가로 세로 비율이 웹 사이트의 레이아웃과 일치하지 않아 이미지가 불완전하게 표시되거나 늘어나거나 변형되는 문제에 직면할 때가 많습니다. 이 문제를 해결하기 위해 오늘은 CSS를 사용하여 이미지의 너비와 높이를 조정하는 방법에 대해 논의하겠습니다.

1. 상위 요소의 위치 속성을 설정합니다

이미지의 적응형 너비와 높이를 구현하기 전에 먼저 CSS 속성인 위치를 이해해야 합니다.

position 속성은 다음 네 가지 값을 포함하여 요소의 위치 지정 방법을 정의합니다.

static: 요소의 일반 레이아웃, 왼쪽, 오른쪽, 위쪽, 아래쪽 및 z-index 속성이 유효하지 않습니다.

상대적: 상대적 위치 지정, 요소는 문서 흐름에서 원래 위치를 계속 유지하지만 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 설정하여 일반(정적) 위치를 기준으로 오프셋될 수 있습니다.

absolute: 절대 위치 지정, 요소는 문서 흐름에서 추출되고 이미 위치된 상위 요소를 기준으로 위치가 지정됩니다.

고정: 위치가 고정되어 요소가 브라우저 창을 기준으로 고정되어 위치합니다.

이미지의 적응형 너비와 높이를 구현하려면 상대 또는 절대 속성을 사용해야 합니다. 작업을 용이하게 하기 위해 먼저 상위 요소의 위치 속성을 상대 요소로 설정합니다. 코드는 다음과 같습니다.

.parent {
    position: relative;
}

로그인 후 복사

2. 이미지의 위치 및 최대 너비 속성을 설정합니다.

위치 속성을 설정한 후 상위 요소인 경우 다음으로 이미지의 위치 속성을 설정해야 합니다. 먼저, 이미지가 상위 요소에 배치될 수 있도록 이미지의 위치 속성을 절대값으로 설정해야 합니다. 동시에 이미지가 상위 요소의 너비를 초과하지 않도록 하려면 max-width 속성을 사용하여 이미지의 최대 너비를 제어하고 이미지가 상위 요소의 너비에 맞게 조정되도록 해야 합니다. 요소. 코드는 다음과 같습니다.

.parent {
    position: relative;
}
.image {
    position: absolute;
    max-width: 100%;
}

로그인 후 복사

위 코드를 통해 이미지의 너비는 상위 요소의 너비에 따라 조정되며, 원래 너비 대 높이 비율은 손상되지 않고 유지됩니다.

3. 이미지의 상단 및 왼쪽 속성을 설정합니다

상위 요소에 배치하려면 이미지의 상단 및 왼쪽 속성도 설정해야 합니다. 여기서는 백분율 값을 사용하여 이미지의 너비와 높이를 조정하도록 설정할 수 있습니다. 일반적으로 이미지의 위치는 중앙에 위치하도록 설정합니다. 코드는 다음과 같습니다.

.parent {
    position: relative;
}
.image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
}

로그인 후 복사

상단 및 왼쪽 속성을 설정하면 이미지가 중심점을 기준으로 배치됩니다. 변환: 변환(-50%, -50%); 속성을 사용하면 이미지의 적응형 너비와 높이에 영향을 주지 않고 이미지를 중앙에 배치할 수 있습니다.

요약:

상위 요소의 위치 속성, 이미지의 위치, 최대 너비, 위쪽 및 왼쪽 속성을 설정하여 이미지의 적응형 너비와 높이를 쉽게 구현할 수 있습니다. 웹사이트에서 많은 수의 이미지를 사용해야 하는 개발자의 경우 이 방법을 사용하면 웹사이트의 사용자 경험을 향상시키면서 작업량을 크게 줄일 수 있습니다.

실제로는 다음 사항에도 주의해야 합니다.