object-fit
object-position background-size 속성은 지정된 영역에 이미지가 표시되는 방식을 제어하는 다양한 옵션을 제공하며 필요한 경우 이미지의 일부를 숨길 수 있습니다. 이것은 왜곡없이 특정 공간에 이미지를 적응시키는 데 유용합니다. background-position
object-fit, , 및 object-fit
cover 속성은 컨텐츠 상자 내에서 이미지 요소의 위치를 제어합니다. 기본값은 contain
none 및 scale-down 및 fill는 모든 유형의 교체 요소를 처리하도록 설계되었지만 왜곡없이 특정 공간에 이미지를 조정하는 데 가장 일반적으로 사용됩니다. 그들은 모든 현대식 브라우저에서 지원되지만 인터넷 익스플로러에서는 지원하지 않습니다. object-position 및 50% 50% 속성을 제공하여 배경 이미지를 크기를 조정하고 배치합니다. 및 object-fit 의 사용
object-position
이미지의 속성 기능은 배경 이미지에서
속성은 크기가 조정 된 컨텐츠 박스에 이미지를 표시 할 수있는 다양한 옵션을 제공합니다. 이미지의 일부를 숨기거나 이미지가 컨텐츠 상자 만 부분적으로 만 채우도록 이미지가 완전히 표시되고 변형되지 않도록 할 수 있습니다.
속성은 컨테이너 내에 이미지가 어떻게 표시되는지 결정하기 위해 5 가지 기본 키워드 값을 제공합니다. 키워드 중 두 가지 (
는 이며, 이는 컨텐츠 상자의 이미지를 중심으로합니다. 나중에
<🎜 🎜> <<> 값은 이미지가 콘텐츠 상자에 완전히 적응하지만 왜곡되지는 않습니다. 이미지는 자연적인 종횡비를 유지하므로 컨테이너를 채우지 않습니다.
를 설정하여 위와 동일한 결과를 얻을 수있을 것 같습니다. 그러나 그것은 그렇지 않습니다. 왜냐하면 그것은 <🎜 🎜>의 기본 설정 인 중심 대신 왼쪽에 이미지를 배치하기 때문입니다. <🎜 🎜>, <<> 와 달리 는 가 이미지보다 작기 때문에 로 변경하면 <🎜 🎜> 설정이없는 것과 같습니다. 기본적으로 이미지가 어떤 크기를 설정하든 컨텐츠 상자를 채우기 때문입니다.
<<> 컨테이너없이 사용 <🎜 🎜>
그리드 영역에 대한 자세한 내용은 CSS 그리드 준비 안내서를 확인하십시오. 이미지 위치를 설정하십시오
<<> 를 사용하여 컨테이너에서 배경 이미지의 위치를 설정하는 것처럼 속성은 컨텐츠 상자 내에서 이미지 요소의 위치를 제어합니다. 의 기본값은 입니다. 이는 이미지 센터가 수평 및 수직 축의 컨텐츠 박스 센터와 정렬되어 있음을 의미합니다. 일련의 키워드 값 (상단, 하단, 왼쪽, 오른쪽, 중앙) 또는 길이 값 (예 : PX, EM 또는 %) 또는 둘 다를 사용하여 변경할 수 있습니다.
는 이미지의 중심이 수평 및 수직 축의 내용 상자의 중심과 정렬되었음을 의미합니다.
<<> 우리가 로
<🎜 🎜>
<🎜 🎜> <<> 결론
<🎜 🎜> <<> 속성은 이미지, 비디오, iframes 및 내장 된 개체와 같은 모든 유형의 교체 요소와 함께 사용되도록 의도됩니다. 일부 요소가 숨겨 질 수있는 정의 된 영역에 비디오와 같은 요소를 조정하는 것이 얼마나 유용한 지에 대해서는 논의해야 할 문제 일 것입니다. 그러나 가능한 사용 사례가 있다는 것은 의심의 여지가 없습니다. 더 나은 옵션은 iframe의 너비를 여유 공간의 속성을 사용하여 비율을 유지하는 것입니다.
및
마지막으로, 위에서 언급했듯이, <🎜 🎜> 및 를 사용하여 그들에 대해 배우는 방법을 참조하십시오. , <🎜 🎜>, 속성은 배경 이미지와 함께 사용할 수 없습니다. <🎜 🎜>,
<🎜
<<> 동시에
이 예에서는 이미지가 컨텐츠 상자를 덮어 쓰고 중앙으로 작성하도록 크기가 조정됩니다. 속성을 광범위하게 지원합니다. 그러나 Internet Explorer는이를 지원하지 않습니다. background-size object-fit
object-fit
::before
object-fit 및 cover)는 상대와 동일한 함수를 수행합니다. contain
background-size
object-fit: cover
cover 값은 아마도 가장 실용적인 값이며 대부분의 경우 선호됩니다. img {
width: 100%;
height: 100%;
}
와 결합하여 컨테이너에 이미지가 어떻게 배치되는지에 대한 더 많은 옵션이 있습니다. cover
<🎜 🎜> <<> 속성은 이미지가 자연스럽고 원래 크기로 유지할 수 있도록합니다. 조정 컨텐츠 상자에 적응할 수있는 부분 이미지 만 볼 수 있습니다. background-position와 달리, 우리의 이미지는 적어도 하나의 축을 따라 완전히 보이지 않아야합니다. 원본 이미지는 컨텐츠 상자보다 넓고 키가 크기 때문에 다음 이미지와 같이 양방향으로 오버플러집니다. 0 0
object-position <<> 50% 50%
object-position<<> 또한 object-fit: none가 아무것도하지 않았다는 의미는 아닙니다. 우리가 보았 듯이, 그것은 object-fit를 전혀 설정하지 않는 것과 비교하여 많은 일을합니다. (위의 예에서 object-fit를 삭제 한 후 상황을 확인하십시오.) <🎜 🎜>.
object-fit: none <<> 와 동일하거나 <🎜 🎜>와 동일합니다. 이미지가 더 작은 결과를 표시하도록
object-fit: scale-down를 선택합니다. scale-down를 선택합니다. 컨테이너 <<<<>가 <🎜 🎜> 이미지보다 크면 none가 지배적이며 이미지는 컨테이너를 한 방향으로 채우는 대신 자연스런 크기를 유지하며,이 코디펜 데모에서 볼 수 있습니다. contain
<<>
contain
none <🎜 🎜>
object-fit: fill <<> 반응 레이아웃에 사용 object-fit
이미지의 지정된 영역의 크기가 브라우저 뷰포트 크기에 응답하는 경우 속성이 가장 유용 할 수 있습니다. 다음 데모는 이미지를 특정한 유연한 그리드 영역에 할당합니다.
fill
object-fit <🎜 🎜>cover <<>
object-position
background-position 객체 위치 1 : 키워드 <🎜 🎜> <🎜 🎜>
object-position
object-position 키워드를 확인할 수 있지만 결과는 쉽게 예측할 수 있어야합니다. 50% 50%
right bottom
100% 100% <🎜 🎜>
img {
width: 100%;
height: 100%;
}object-fit에 대해 자세히 알아 보려면 이러한 속성에 대한 MDN 페이지를 확인하십시오.
width: 100%
aspect-ratio
object-fit 속성을 <🎜 🎜> 및 <🎜 🎜> 속성과 비교하는 것은 많은 유사성을 갖는 것이 좋습니다. css object-fit
<🎜 🎜> <<> css <🎜 object-position 속성 <🎜 🎜> <🎜 🎜>에 대한 FAQS (FAQS)
CSS에서
, object-fit 및 <🎜 🎜>. object-position
반면에 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와 <🎜 🎜>를 사용할 수 있습니까? img {
width: 100%;
height: 100%;
} 속성을 지원합니까?
및 object-position
object-position
0% 0%
위 내용은 CSS 객체 적합 및 객체 위치를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
