HTML&CSS一覧

画像のトリミング(object-fit)

  • 2022/05/03
  • HTML&CSS

contain ・・・縦横比を維持したまま要素のコンテンツボックスに収まるように拡大縮小。オブジェクト全体がボックス内に表示されるオブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示。
  

cover・・・縦横比を維持したまま要素のコンテンツボックス全体を埋めるように拡大縮小。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られる。
  

fill・・・要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋める。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされる。
  

none・・・拡大縮小なし
  

scale-down・・・noneとcontainのうち、小さい方のサイズに合わせて表示。
  

参考URL : https://www.webcreatorbox.com/tech/object-fit
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

アイコンの設定方法

  • 2022/05/01
  • HTML&CSS
<link rel="icon" href="favicon.ico">
 
参考URL : https://techacademy.jp/magazine/30972

背景に写真を使う

  • 2022/04/26
  • HTML&CSS

CSSコード

 

background-image: url("(ファイル名)")

 

サイズを変える

 

background-size = auto → 基本そのまま

background-size = contain → 背景画像全体が見える

background-size = cover → 要素を埋める

 

参考URL : https://www.keicode.com/script/css-background-size.php