お知らせ

Q: [CSS] CSS オブジェクトフィットプロパティ 2019.12.04

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

브라우저 지원

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

Property
object-fit	31.0	16.0	36.0	7.1	19.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]コメント

書き込む

マニュアル

お知らせ

브라우저 지원

정의(Definition)

문법(Syntax)

속성(Property)

Original

FILL

CONTAIN

COVER

NONE

SCALE-DOWN

Facebook [ja]コメント

Facebook [ja]コメント

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