본문으로 건너뛰기

전체보기
전체보기

메뉴보기 search
메뉴얼
THEVOS WebMail
         
배경이미지

메뉴얼

공지사항

✔ 뷰어로 보기
CSS

CSS object-fit 속성

by TheVOS posted Dec 04, 2019
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
원문출처 https://www.w3schools.com/css/css3_object-fit.asp

object-fit 속성은 IMG, VIDEO 태그의 크기를 컨테이너에 맞게 자정하는데 사용됩니다.


브라우저 지원

테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.

Propertyicon-chrome1.png icon-edge.png icon-firefox1.png icon-safari1.png icon-opera1.png
object-fit31.016.036.07.119.0
특징설명
기본 값object-fit : 개별적 속성
상속안됨
애니메이션안됨
적용-
버전CSS3

정의(Definition)

  • object-fit 속성은 <img>, <video> 태그의 크기를 정의합니다.

문법(Syntax)

object-fit: fill | contain | cover | scale-down | none

속성(Property)

속성값설명
fill컨텐츠 사이즈 크기에 맞게 설정합니다.
contain컨텐츠의 가로 값을 기준으로 맞게 설정합니다.
cover컨텐츠 화면 사이즈에 맞게 설정합니다.
scale-down컨텐츠 크기 보다 작게 설정합니다.


Original

FILL

CONTAIN

COVER

NONE

SCALE-DOWN




object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;


Facebook [ko]댓글 

Atachment
첨부 '5806'
Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
List of Articles
카테고리 아니오 제목 날짜 조회 수
EC-CUBE 4系 39 管理機能一覧 2020.11.12 30
EC-CUBE 4系 38 フロント機能一覧 2020.11.12 33
EC-CUBE 2系 37 EC-CUBE 2系でポート番号付で管理画面を動かす 2020.01.02 64
EC-CUBE 2系 36 EC-CUBE 2系で注文を受けた商品の規格を後で削除すると、管理画面で受注内容を編集できなくなる 2020.01.02 135
EC-CUBE 2系 35 EC-CUBE 2系でShift_JISに存在しない文字が含まれた受注データがあると、その受注内容が受注CSVからまるごと欠落する 2020.01.02 89
EC-CUBE 2系 34 EC-CUBE 2系で商品情報をCSVで更新するとき関連商品情報が削除される 2020.01.02 104
EC-CUBE 2系 33 EC-CUBE 2系で商品を沢山購入すると住所情報が欠落する 2020.01.02 84
EC-CUBE 2系 32 EC-CUBE 2系の「もっと見る」を簡潔に 2020.01.02 624
EC-CUBE 2系 31 EC-CUBEをインストールする file 2019.12.10 95
CSS » CSS object-fit 속성 file 2019.12.04 52
CSS 29 Css 텍스트 외곽선 처리하기, Stroke 2019.11.28 111
EC-CUBE 4.x 28 EC-CUBE 4를 설치했을 때 설정 한 데이터베이스 암호는 어디에 저장되는 것입니까? 2019.11.14 388
EC-CUBE 2系 27 EC-CUBE2.13カスタマイズ：新しいページを追加する file 2019.11.11 636
EC-CUBE 3系 26 관리 화면의 사이드 메뉴에 항목 추가하는 방법 file 2019.11.11 166
EC-CUBE 2.x 25 EC-CUBE에서 모든 페이지에서 로그인 체크하기 2019.11.11 450
EC-CUBE 2系 24 イベントセット販売プラグインマニュアル file 2019.11.07 131
EC-CUBE 4系 23 EC-CUBE4 계에서 관리 화면에 새 메뉴 항목을 추가하는 방법 file 2019.10.28 496
EC-CUBE 2.x 22 EC CUBEで商品ごとに支払い方法を簡単に分ける file 2019.10.28 665
EC-CUBE 2系 21 2.13系 ソフトウェア要件 2019.10.11 57
EC-CUBE 2系 20 ECCUBE 2.13のインストール方法をスクリーンショット付きでわかりやすく徹底解説！ file 2019.10.10 132
쓰기
Board Pagination Prev 1 2 Next
/ 2

고객의 비지니스 스타일의 가치를 소중히하는 기업 THEVOS 입니다. THEVOS는 귀사의 긴밀한 외부 IT팀 입니다.

주식회사 자보스 ECO 연구소

  • 812-0029　일본 후쿠오카현 후쿠오카시 하카타구 코몬도마치10-5-501
  • 한국：070-4809-0019 일본：080-3984-5969
  • webmaster@thevos.jp

Copyright © 2009/2024 株式会社ザボスECO研究所. All Rights Reserved.

Design by THEVOS
CLOSE