メニュースキップ

전체보기
전체보기

메뉴보기 search
マニュアル
THEVOS WebMail
         
배경이미지

マニュアル

お知らせ

✔ Viewer
CSS

CSS オブジェクトフィットプロパティ

by TheVOS posted Dec 04, 2019
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付
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 [ja]コメント 

Atachment
添付 '6539'
Facebook Twitter Google Pinterest
上へ 下へ Go comment 印刷 添付
Select Editor
?
  • Q: [CSS] CSS オブジェクトフィットプロパティ 2019.12.04
    A:
    https://thevos.jp/Manual/58029

    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 [ja]コメント 

  • Q: [CSS] Css 텍스트 외곽선 처리하기, Stroke 2019.11.28
    A:
    https://thevos.jp/Manual/57951

    CSSを使用してテキストに輪郭、ストローク効果を与える方法を見てみます。

    輪郭はテキストを強調する効果的な方法です。CSSを使用して簡単に使用することができますが、最も簡単な方法は次のように-webkit-text-strokeを使用する方法です。

    -webkit-text-stroke: 1px #000


    ただし、この方法は非常に便利ですが、標準的な方法ではなく、ウェブキットおよびモジラ系のブラウザでのみ適用されます。使用する場合は、次のようにCSSに適用してください。

     

    .text-stroke {
      -webkit-text-stroke: 1px #000;
    }

     

    これでテキストに輪郭が鮮明に表示されます。

    それでは、別の方法を見てみましょう。

     

    # -webkit-text-stroke クロスブラウジング方法
    以下のような方法を使用すると、テキストの影響を利用して、同様の効果を得ることができます。以下のコードをご覧ください。  

    .text-stroke {
        color: #f00;
        text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;  
    }


    この方法は、text-shadowが適用されるほとんどのブラウザで実装されます。非常に効果的な方法です。
     

    # 実際の輪郭が適用された例を見る
    もしも、以下のようなHTMLに上記のCSSを適用して輪郭を直接実装してみましょう。

    <span class="text-stroke">THEVOS</span>


    上記のコードの実行結果は以下のようになります。

    THEVOS

    Facebook [ja]コメント 

書き込む
Board Pagination Prev 1 Next
/ 1

お客様のビジネススタイルの価値を大切にする企業THEVOSです。 THEVOSは、お客様との緊密な外部ITチームです。

株式会社ザボスECO研究所

  • 〒812-0029　福岡市博多区古門戸町10-5-501
  • 日本：080-3984-5969 韓国：070-4809-0019
  • webmaster@thevos.jp

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

Design by THEVOS
CLOSE