TechCodeview

CSS에서 이미지를 배치하는 방법에는 다음과 같은 여러 가지가 있습니다. 객체 위치 속성, 사용 뜨다 속성(요소를 왼쪽이나 오른쪽으로 정렬하는 데 사용)

객체 위치 속성을 사용하여

그만큼 객체 위치 CSS의 속성은 컨테이너 내 콘텐츠의 정렬을 지정합니다. 그것은 다음과 함께 사용됩니다. 객체에 딱 맞는 요소가 또는와 같은 방식을 정의하는 속성 콘텐츠 상자에서 x/y 좌표로 배치됩니다.

문자열 정수

사용할 때 객체에 딱 맞는 속성, 기본값 객체 위치 ~이다 50% 50% 이므로 기본적으로 모든 이미지는 콘텐츠 상자 중앙에 배치됩니다. 다음을 사용하여 기본 정렬을 변경할 수 있습니다. 객체 위치 재산.

통사론

 object-position: | initial | inherit; 

그만큼 위치 가치 객체 위치 속성은 컨테이너 내부의 비디오 또는 이미지 위치를 정의합니다. 두 개의 숫자 값을 허용합니다. 여기서 첫 번째 값은 x축을 제어하고 두 번째 값은 y축을 제어합니다. 우리는 다음과 같은 문자열을 사용할 수 있습니다. 왼쪽 오른쪽 , 또는 센터 , 등을 사용하여 컨테이너에 이미지를 배치합니다. 음수 값을 허용합니다.

몇 가지 예를 사용하면 더 명확하게 이해할 수 있습니다.

예

이 예에서는 다음과 같은 문자열 값을 사용합니다. '오른쪽 위', '가운데 위', 그리고 '왼쪽 위' 이미지 위치를 지정합니다.

 CSS object-position property #center { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: center top; } #left { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: left top; } #right { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: right top; } <h3>object-position: center top;</h3> <h3>object-position: left top;</h3> <h3>object-position: right top;</h3> 

산출

이제 다음을 사용하는 또 다른 예가 있습니다. 객체 위치 재산.

C# 튜토리얼

예

이 예에서는 초기의 이미지를 중앙에 위치시키는 값입니다. 이는 초기값이 속성을 기본값으로 설정하기 때문입니다. 50% 50% . 우리는 또한 숫자 값을 사용하고 있습니다. 200px 그리고 100px .

안녕하세요, 자바와 함께하는 세상

 CSS object-position property #num { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: 200px 100px; } #init { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: initial; } <h3>object-position: 200px 100px;</h3> <h3>object-position: initial;</h3> 

산출

float 속성을 사용하여

CSS float 속성은 요소를 왼쪽이나 오른쪽으로 밀어서 다른 요소가 그 요소를 둘러쌀 수 있도록 하는 데 사용되는 위치 지정 속성입니다. 일반적으로 이미지와 레이아웃에 사용됩니다.

요소는 수평으로만 부동됩니다. 따라서 요소를 위나 아래가 아닌 왼쪽이나 오른쪽으로만 부동시킬 수 있습니다. 부동 요소는 가능한 한 왼쪽이나 오른쪽으로 이동할 수 있습니다. 간단히 말해서, 부동 요소가 맨 왼쪽이나 맨 오른쪽에 표시될 수 있음을 의미합니다.

사용예를 들어보자. 뜨다 재산.

예

 CSS float property #left { float: left; } #right { float: right; } 

산출