LoginSignup
0
0

HTML とCSSのまとめ(1) R5/6/20

Last updated at Posted at 2023-06-21

表示に関して気をつけること

・画面中央より35px下に文字を表示させたい時は
top: calc(50% - 35px);

と記す。
半角で-を%と35から離して表記しないと、反映されないから注意する。

・ ;をつけ忘れると、表示されない。

object-fitについて

object-fit: cover;は、CSSのプロパティであり、画像やビデオなどのインライン要素をコンテナにフィットさせる方法を指定します。

object-fitプロパティにcoverを指定すると、以下のような動作が行われます。
コンテナのサイズに合わせて、対象の要素(画像やビデオなど)が拡大・縮小されます。
アスペクト比は保持されますが、コンテナの範囲内に完全に収まるようにリサイズされます。
もし対象の要素がコンテナよりも小さい場合、元のサイズを保持したままで中央に配置されます。

object-fit: contain; これは、対象の要素をコンテナ内に完全に収めるために拡大または縮小しますが、アスペクト比を保持します。要素がコンテナよりも小さい場合は、空白が発生します。

object-fit: fill; これは、対象の要素をコンテナにピッタリとフィットさせますが、アスペクト比は保持されません。要素がコンテナよりも大きい場合は、切り取られます。

object-fit: none;これは、対象の要素をコンテナ内にそのまま表示します。要素のサイズやアスペクト比は変更されません。コンテナよりも大きい場合は、はみ出します。

object-fit: scale-down; これは、containとnoneの中でより適切な方を選択します。要素がコンテナよりも小さい場合はcontainと同じように動作し、要素がコンテナよりも大きい場合はnoneと同じように動作します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0