Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 스타일 objectFit 속성

<시간/>

HTML DOM 스타일 objectFit 속성은 HTML 문서의 이미지 또는 비디오 요소가 컨테이너 요소에 맞게 크기를 조정하는 방법을 반환하고 수정합니다.

구문

다음은 구문입니다 -

1. objectFit 반환

object.objectFit

2. objectFit 수정

object.objectFit = “value”

여기서 수 -

설명
초기 이 속성 값을 기본값으로 설정합니다.
상속 상위 요소에서 이 속성 값을 상속합니다.
없음 내용의 크기가 조정되지 않습니다.
채우기 여기에서 콘텐츠는 요소의 콘텐츠 상자를 채우도록 크기가 조정되며 필요한 경우 개체가 콘텐츠 상자에 맞게 늘어나거나 찌그러집니다.
포함 콘텐츠는 HTML 문서의 요소 콘텐츠 상자에 맞으면서 종횡비를 유지하도록 크기가 조정됩니다.
표지 요소의 전체 콘텐츠 상자를 HTML 문서에 맞추면서 가로 세로 비율을 유지하기 위해 콘텐츠의 크기가 조정되거나 잘립니다.
축소 내용의 크기가 조정됩니다.

HTML DOM 스타일 objectFit 속성의 예를 살펴보겠습니다 -

예시

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .img-class {
      width: 200px;
      height: 250px;
   }
</style>
<body>
<h1 style="text-align:center">DOM Style objectFit Property Demo</h1>
<img alt="Learn Time Series" src="https://www.tutorialspoint.com/time_series/images/time-series-mini-logo.jpg" class="img-class" width='300' height='200'>
<button class="btn" onclick="set()">Set objectFit</button>
<script>
   function set() {
      document.querySelector('.img-class').style.objectFit = "contain";
   }
</script>
</body>
</html>

출력

HTML DOM 스타일 objectFit 속성

"objectFit 설정을 클릭합니다. ” 버튼을 눌러 이미지 요소에 개체 맞춤 속성을 설정 -

HTML DOM 스타일 objectFit 속성