CSS 객체 적합 및 객체 위치를 사용하는 방법

코어 포인트

CSS 속성 및

는 배경 이미지에 대해 CSS 속성

및
• 와 유사한 임베디드 이미지 및 기타 교체 요소의 크기를 조정하고 배치하는 데 사용될 수 있습니다. object-fit object-position background-size 속성은 지정된 영역에 이미지가 표시되는 방식을 제어하는 ​​다양한 옵션을 제공하며 필요한 경우 이미지의 일부를 숨길 수 있습니다. 이것은 왜곡없이 특정 공간에 이미지를 적응시키는 데 유용합니다. background-position
속성에는 5 가지 주요 키워드 값이 있습니다 :
• , , object-fit, , 및
• . 이 값은 이미지가 컨테이너 내에 표시되는 방법을 결정하고, 영역을 덮고, 영역에 적응하고, 자연 크기를 유지하고, 컨텐츠 상자를 맞추거나 채우도록 줄일 수 있습니다. object-fit cover 속성은 컨텐츠 상자 내에서 이미지 요소의 위치를 ​​제어합니다. 기본값은 로, 이미지 센터를 컨텐츠 박스 센터와 정렬하지만 일련의 키워드 값 또는 길이 값을 사용하여 조정할 수 있습니다. contain none 및 scale-down 및 fill는 모든 유형의 교체 요소를 처리하도록 설계되었지만 왜곡없이 특정 공간에 이미지를 조정하는 데 가장 일반적으로 사용됩니다. 그들은 모든 현대식 브라우저에서 지원되지만 인터넷 익스플로러에서는 지원하지 않습니다.
• CSS는 object-position 및 50% 50% 속성을 ​​제공하여 배경 이미지를 크기를 조정하고 배치합니다. 및
속성을 ​​통해 임베디드 이미지 (및 비디오와 같은 기타 교체 요소)에서 유사한 작업을 수행 할 수 있습니다. 이 기사는 를 사용하여 이미지를 특정 공간에 장착하는 방법과 해당 공간에서 이미지의 위치를 ​​정확하게 제어하는 ​​방법에 따라 다릅니다.
• object-fit 의 사용 때로는 이미지가 너무 커서 우리가 원하는 공간에 맞을 수 있습니다. 과거에는 이미지 편집기에서 이미지를 자르거나 폭 및/또는 높이 제약 조건을 설정하여 이미지를 조정하거나 (완벽한 선택이 아님) 복잡한 자르기를 수행하거나 배경 이미지를 사용하는 데 의지해야했습니다. 이미지가 단지 장식용이 아니라는 경우 유감입니다). object-position 이미지의 속성 기능은 배경 이미지에서
의 특성과 유사합니다. 지정된 영역에 이미지가 표시되는 방법을 제어하는 ​​다양한 옵션을 제공하고 일부를 숨길 수 있습니다. 필요한 경우 이미지의 내용. 이 지정된 영역은 고정 너비와 높이를 가질 수 있거나 브라우저 뷰포트의 크기에 따라 자라는 메쉬 영역과 같이 더 반응이 좋은 공간 일 수 있습니다.

일하는 방법

background-size 각 HTML 요소에는 자체 "컨텐츠 박스"가 있으며 요소가 차지하는 공간을 나타냅니다. 기본적으로 이미지의 내용 상자는 자연 크기와 일치합니다.

이미지에 다른 너비 및/또는 높이를 적용 할 때 실제로 콘텐츠 상자의 크기를 변경하고 있습니다. 컨텐츠 상자의 크기가 변경되면 이미지가 여전히 컨텐츠 상자를 채 웁니다. 따라서 300px x 300px 이미지가 있고 크기를 300px x 200px로 설정하면 이미지가 변형 된 것으로 보입니다.

속성은 크기가 조정 된 컨텐츠 박스에 이미지를 표시 할 수있는 다양한 옵션을 제공합니다. 이미지의 일부를 숨기거나 이미지가 컨텐츠 상자 만 부분적으로 만 채우도록 이미지가 완전히 표시되고 변형되지 않도록 할 수 있습니다.

설정

object-fit 속성의 작동 방식을 자세히 설명하기 위해 그리드 레이아웃을 사용하여 중앙에있는 DIV에 이미지를 배치합니다. DIV는 갈색 배경을 가지며 점선 테두리는

pseudo element에 의해 제공되므로 이미지에 어떤 변화가 일어 났는지 이해하는 데 도움이됩니다.

Codepen에서 sitepoint (@sitepoint)의 예를보기 : 이미지 데모의 경우 다음 이미지 (Oia, Santorini, Greece)를 사용합니다. 자연 치수는 400px x 600px입니다.

우리의 이미지는 우리의 div보다 훨씬 크며 DIV 내부에 이미지를 배치하면 아래와 같이 오버플로됩니다.

Codepen에서 sitepoint (@sitepoint)의 예를보기 : object-fit : setup2 object-fit 우리의 목표는 컨테이너에 편안하게 맞추는 동시에 이미지가 이와 같이 컨테이너가 넘쳐나는 것을 방지하는 것입니다. ::before 배경 이미지를 사용하는 경우 와 비슷한 것을 설정할 수 있으며 배경 이미지는 컨테이너 영역에 제한됩니다. 그러나 우리가 볼 수 있듯이

가 작동하기 위해서는 먼저 이미지 컨텐츠 상자의 너비와 높이를 정의하여 자연 치수와 다릅니다. 다음 예에서는 이미지의 너비와 높이를 100%로 제한하여 컨텐츠 박스가 컨테이너 DIV의 크기와 일치하도록합니다.

이것은 어떻게 생겼는지입니다. Codepen에서 sitepoint (@sitepoint)의 예를보기 : 이미지와 콘텐츠 상자는 이제 컨테이너와 완벽하게 맞지만 이미지는 심각하게 변형됩니다. 이것은 의 마법이 작용하는 곳입니다. 그것이 무엇을 제공 할 수 있는지 보자.

컨테이너에 이미지를 적응시켜

속성은 컨테이너 내에 이미지가 어떻게 표시되는지 결정하기 위해 5 가지 기본 키워드 값을 제공합니다. 키워드 중 두 가지 (object-fit 및 cover)는 상대와 동일한 함수를 수행합니다. contain background-size

값은 이미지가 컨테이너 영역을 완전히 덮도록 강요하여 왜곡없이 가능한 한 많은 이미지를 표시합니다.

Codepen에서 sitepoint (@sitepoint)의 예를보기 : object-fit : cover 이미지가 매우 높기 때문에 전체 너비가 보이지만 다음 이미지와 같이 전체 높이를 볼 수 없습니다. object-fit: cover

cover 값은 아마도 가장 실용적인 값이며 대부분의 경우 선호됩니다.

여기서 주목할만한 가치는 이미지의 위치입니다. (기본값은

<code class="language-css">img {
  width: 100%;
  height: 100%;
}</code>

이며 컨테이너의 왼쪽 상단에서 배경 이미지를 찾습니다)와 달리, 기본값

는 이며, 이는 컨텐츠 상자의 이미지를 중심으로합니다. 나중에 속성을 ​​보면 이미지의 어떤 부분이 보이는지 지정하는 방법을 배웁니다.

값은 이미지가 콘텐츠 상자에 완전히 적응하지만 왜곡되지는 않습니다. 이미지는 자연적인 종횡비를 유지하므로 컨테이너를 채우지 않습니다.

Codepen에서 sitepoint (@sitepoint)의 예를보기 : object-fit : contains 이미지에서 단순히

를 설정하여 위와 동일한 결과를 얻을 수있을 것 같습니다. 그러나 그것은 그렇지 않습니다. 왜냐하면 그것은 의 기본 설정 인 중심 대신 왼쪽에 이미지를 배치하기 때문입니다. , 와 결합하여 컨테이너에 이미지가 어떻게 배치되는지에 대한 더 많은 옵션이 있습니다.

cover 속성은 이미지가 자연스럽고 원래 크기로 유지할 수 있도록합니다. 조정 컨텐츠 상자에 적응할 수있는 부분 이미지 만 볼 수 있습니다.

Codepen에서 sitepoint (@sitepoint)의 예를보기 :

와 달리 background-position와 달리, 우리의 이미지는 적어도 하나의 축을 따라 완전히 보이지 않아야합니다. 원본 이미지는 컨텐츠 상자보다 넓고 키가 크기 때문에 다음 이미지와 같이 양방향으로 오버플러집니다. 0 0 object-position 50% 50% 이미지의 중심이 기본적으로 컨텐츠 상자의 중심과 정렬되어 있음을 다시 참고하십시오. object-position 또한

는 object-fit: none가 아무것도하지 않았다는 의미는 아닙니다. 우리가 보았 듯이, 그것은 object-fit를 전혀 설정하지 않는 것과 비교하여 많은 일을합니다. (위의 예에서 object-fit를 삭제 한 후 상황을 확인하십시오.) . object-fit: none

속성은

와 동일하거나 와 동일합니다. 이미지가 더 작은 결과를 표시하도록 object-fit: scale-down를 선택합니다.

Codepen에서 sitepoint (@sitepoint)의 예를보기 : 분명히, 우리의 현재 예에서는 가 이미지보다 작기 때문에 scale-down를 선택합니다. 컨테이너 가 이미지보다 크면 none가 지배적이며 이미지는 컨테이너를 한 방향으로 채우는 대신 자연스런 크기를 유지하며,이 코디펜 데모에서 볼 수 있습니다. contain 데모에서

값을

로 변경하면 설정이없는 것과 같습니다. 기본적으로 이미지가 어떤 크기를 설정하든 컨텐츠 상자를 채우기 때문입니다. Codepen에서 sitepoint (@sitepoint)의 예를보기 : object-fit : fill 속성이 이미지를 변형시킬 수 있으므로 대부분의 경우 최상의 선택이 아닐 수 있습니다.

컨테이너없이 사용 contain 위의 예에서, 우리는 div 컨테이너에서 이미지를 크기를 조정하기 위해 를 사용하고 있지만 실제로 본 원리는 컨테이너 없이도 작동합니다. 중요한 것은 이미지 컨텐츠 상자의 크기와 콘텐츠 상자에 이미지가 표시되는 방법입니다. 예를 들어 주변의 div없이 다음 CSS를 이미지에 적용 할 수 있습니다. 결과는 아래 코드 펜 데모에 나와 있습니다. Codepen에서 sitepoint (@sitepoint)의 예를보기 : object-fit : 컨테이너 없음 none

속성의 값을 덮어 쓰고, 채우고, 축소하고, 위의 예에서 각 값의 동작을보기 위해 값을 변경하십시오. 결과는 이미지의 결과가 100% 너비와 높이로 설정된 결과와 동일하며 div에 300px x 300px로 포함됩니다.

object-fit: fill 반응 레이아웃에 사용

object-fit 이미지의 지정된 영역의 크기가 브라우저 뷰포트 크기에 응답하는 경우 속성이 가장 유용 할 수 있습니다. 다음 데모는 이미지를 특정한 유연한 그리드 영역에 할당합니다. fill CodePen에서 SitePoint (@SitePoint)의 예를보기 : 응답 영역에서 객체 적합 object-fit 뷰포트 및 그리드 영역이 확장되고 축소됨에 따라 그리드 영역에 대한 자세한 내용은 CSS 그리드 준비 안내서를 확인하십시오. cover

사용

이미지 위치를 설정하십시오 를 사용하여 컨테이너에서 배경 이미지의 위치를 ​​설정하는 것처럼 속성은 컨텐츠 상자 내에서 이미지 요소의 위치를 ​​제어합니다.

우리가 볼 수 있듯이,

의 기본값은 입니다. 이는 이미지 센터가 수평 및 수직 축의 컨텐츠 박스 센터와 정렬되어 있음을 의미합니다. 일련의 키워드 값 (상단, 하단, 왼쪽, 오른쪽, 중앙) 또는 길이 값 (예 : PX, EM 또는 %) 또는 둘 다를 사용하여 변경할 수 있습니다. object-position 이제 우리의 이미지를 오른쪽 하단에서 배치하고 싶다고 가정 해 봅시다. 우리는 키워드 또는 백분율 값을 사용할 수 있습니다

:

CodePen에서 SitePoint (@SitePoint)의 예를보기 : background-position 객체 위치 1 : 키워드 다음 이미지는 이미지의 현재 위치를 보여줍니다. object-position

위의 예제에서 타겟팅 키워드를 사용하여 작동 방식 및 object-position 키워드를 확인할 수 있지만 결과는 쉽게 예측할 수 있어야합니다. 50% 50% 우리는 픽셀 또는 EM과 같은 장치를 사용하여 컨테이너에서 이미지를 상쇄 할 수도 있습니다. 예를 들면 :

Codepen에서 sitepoint (@sitepoint)의 예를보기 : 우리는 아래 그림과 같이 오른쪽 하단에서 유닛과 키워드를 결합하여 비슷한 오프셋을 만들 수 있습니다. right bottom Codepen에서 sitepoint (@sitepoint)의 예를보기 : 100% 100% 우리는 컨텐츠 박스에서 이미지를 찾기 위해 백분율을 사용 할 수 있음을 알았습니다.

속성과 마찬가지로

<code class="language-css">img {
  width: 100%;
  height: 100%;
}</code>

로 백분율을 사용하는 것은 약간 혼란 스러울 수 있습니다. 's

는 이미지의 중심이 수평 및 수직 축의 내용 상자의 중심과 정렬되었음을 의미합니다. 우리가 로

로 설정하면 이미지의 왼쪽의 20%에있는 수직선이 내용 상자의 왼쪽 20%의 수직선과 수평선과 일치 함을 의미합니다. 아래 그림과 같이 콘텐츠 상자의 40%에서 수평선과 일치하는 이미지 상단의 40%에서 줄을 긋습니다.

우리는 아래 코드 펜 데모에서 이것을 볼 수 있습니다.

Codepen에서 SitePoint (@SitePoint)의 예를보기 :

객체 위치 4 : 백분율

결론 속성은 이미지, 비디오, iframes 및 내장 된 개체와 같은 모든 유형의 교체 요소와 함께 사용되도록 의도됩니다. 일부 요소가 숨겨 질 수있는 정의 된 영역에 비디오와 같은 요소를 조정하는 것이 얼마나 유용한 지에 대해서는 논의해야 할 문제 일 것입니다. 그러나 가능한 사용 사례가 있다는 것은 의심의 여지가 없습니다. 더 나은 옵션은 iframe의 너비를 여유 공간의

로 설정 한 다음

속성을 ​​사용하여 비율을 유지하는 것입니다. 더 일반적인 상황은 이미지를 특정 공간에 적응시켜야 할 필요가 있으므로 는 이미지가 왜곡없이 공간에 적응할 수 있도록하는 데 매우 유용합니다 (이미지의 일부가 숨겨져 있어도).

및 object-fit에 대해 자세히 알아 보려면 이러한 속성에 대한 MDN 페이지를 확인하십시오. width: 100% [Object-Fit] (링크는 MDN 객체 적합 링크로 대체해야합니다) aspect-ratio [Object-Position] (링크는 MDN 객체 위치 링크로 대체되어야합니다)

마지막으로, 위에서 언급했듯이, 및 object-fit 속성을 ​​ 및 속성과 비교하는 것은 많은 유사성을 갖는 것이 좋습니다. css

및

를 사용하여 그들에 대해 배우는 방법을 참조하십시오. object-fit css object-position

및

속성 에 대한 FAQS (FAQS) CSS에서
• 와
의 차이점은 무엇입니까?
• CSS의 및
속성은 이미지 또는 비디오와 같은 대체 요소의 내용을 제어하는 ​​데 사용됩니다. 속성은 요소가 컨텐츠 박스 높이와 너비에 응답하는 방법을 정의합니다. CSS의 와 유사하지만 교체 요소와 함께 작동합니다. 5 가지 값이 있습니다 : ,

,

, , object-fit 및 . object-position 반면에 속성은 교체 요소가 상자 안에있는 위치를 결정합니다. 와 비슷하지만 교체 요소와 함께 작동합니다. x 및 y 좌표를 나타내려면 두 가지 값이 필요하므로 요소의 위치를 ​​설정합니다. background-size 이미지 크기를 조정하기 위해 background-position 속성을 ​​사용하는 방법은 무엇입니까? background-size 특성을 사용하여 컨테이너에 맞게 이미지를 크기리 르는 방법을 제어 할 수 있습니다. 예는 다음과 같습니다. background-position 이 예에서는 컨테이너의 전체 너비와 높이를 덮고 종횡비를 유지하도록 이미지가 크기가 커지게됩니다. 이미지의 종횡비가 컨테이너의 종횡비와 일치하지 않으면 이미지가 잘립니다.

배경 이미지와 함께

를 사용할 수 있습니까? object-position

아니요,

속성은 배경 이미지와 함께 사용할 수 없습니다. , object-position 또는 와 같은 교체 요소만으로 작동합니다. 배경 이미지의 경우 img 속성을 ​​대신 사용할 수 있습니다. video embed background-position 's

가치는 어떻게 작동합니까?

속성의 object-fit 값은 종횡비를 유지하면서 컨텐츠 상자에 맞게 컨텐츠를 크기로 만듭니다. 종횡비가 컨텐츠의 종횡비와 일치하지 않으면 전체 컨텐츠가 표시되지만 콘텐츠 상자에는 여전히 공간이있을 수 있습니다. contain

값의 기능은 무엇입니까?

object-fit 속성의 contain

값은 컨텐츠가 컨텐츠 상자의 높이와 너비를 무시할 것임을 의미합니다. 원래 크기를 유지하므로 컨텐츠 상자보다 큰 경우 컨텐츠를 자르면 컨텐츠가 잘릴 수 있습니다.

중심 이미지를 사용하는 방법은 무엇입니까? object-fit 속성을 ​​사용하여 컨텐츠 상자의 이미지를 중앙에 놓을 수 있습니다. 예는 다음과 같습니다. none 이 예에서는 이미지가 컨텐츠 상자의 중앙에 있습니다.

에서 백분율 값을 사용할 수 있습니까?

예, object-fit 속성에서 백분율 값을 사용할 수 있습니다. 이 값은 컨텐츠 상자에 대한 콘텐츠의 위치를 ​​나타냅니다. 예를 들어, none는 내용 상자의 왼쪽 상단에 내용을 찾는 반면 는 오른쪽 하단에 위치합니다.

object-position 값을 지정하지 않으면 기본값은 이며 컨텐츠 상자 내의 컨텐츠를 중심으로합니다.

동시에 object-position와 를 사용할 수 있습니까?

예, 및

<code class="language-css">img {
  width: 100%;
  height: 100%;
}</code>

속성을 ​​사용하여 컨텐츠의 크기와 위치를 제어 할 수 있습니다. 예는 다음과 같습니다.

이 예에서는 이미지가 컨텐츠 상자를 덮어 쓰고 중앙으로 작성하도록 크기가 조정됩니다.

모든 브라우저는 및

속성을 ​​지원합니까? object-position Chrome, Firefox, Safari 및 Edge를 포함한 모든 현대식 브라우저는

및

속성을 ​​광범위하게 지원합니다. 그러나 Internet Explorer는이를 지원하지 않습니다. object-position 모든 코드 예제의 코드 펜 링크는 실제 링크로 대체되어야합니다. 이 기사는 의사 원리의 요구 사항을 충족시키기 위해 크게 다시 작성되고 연마되었으며 원본 텍스트의 모든 정보와 사진을 유지합니다. 0% 0%

위 내용은 CSS 객체 적합 및 객체 위치를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!