object-fit

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2020å¹´1æ.

object-fit ã¯ CSS ã®ããããã£ã§ãç½®æè¦ç´ ãä¾ãã° <img> ã <video> ãªã©ã®ã³ã³ãã³ãããã³ã³ããã¼ã«ã©ã®ããã«ã¯ãè¾¼ãããè¨å®ãã¾ãã

ã¡ã¢: object-fit ããããã£ã¯ã<iframe>ã<embed>ã<fencedframe> ã®åè¦ç´ ã§ã¯å¹æãããã¾ããã

è©¦ãã¦ã¿ã¾ããã

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: none;

object-fit: scale-down;

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/proxy/developer.mozilla.org/shared-assets/images/examples/plumeria-146x200.jpg" />
</section>

#example-element {
  height: 100%;
  width: 100%;
  border: 2px dotted #888888;
}

æ§æ

css

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

/* ã°ãã¼ãã«å¤ */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

å¤

contain: ç½®æã³ã³ãã³ãã¯ã¢ã¹ãã¯ãæ¯ãç¶æããã¾ã¾ãè¦ç´ ã®ã³ã³ãã³ãããã¯ã¹ã«åã¾ãããã«æ¡å¤§ç¸®å°ããã¾ãããªãã¸ã§ã¯ãå¨ä½ãããã¯ã¹åã«è¡¨ç¤ºãããã¢ã¹ãã¯ãæ¯ãç¶æãããã®ã§ããªãã¸ã§ã¯ãã®ã¢ã¹ãã¯ãæ¯ã¨ããã¯ã¹ã®ã¢ã¹ãã¯ãæ¯ãåããªãå ´åã¯ãã¬ã¿ã¼ããã¯ã¹ã¾ãã¯ãã©ã¼ããã¯ã¹è¡¨ç¤ºã«ãªãã¾ãã
cover: ç½®æã³ã³ãã³ãã¯ã¢ã¹ãã¯ãæ¯ãç¶æããã¾ã¾ãè¦ç´ ã®ã³ã³ãã³ãããã¯ã¹å¨ä½ãåããããã«æ¡å¤§ç¸®å°ããã¾ãããªãã¸ã§ã¯ãã®ã¢ã¹ãã¯ãæ¯ãããã¯ã¹ã®ã¢ã¹ãã¯ãæ¯ã¨åããªãå ´åã¯ããªãã¸ã§ã¯ãã®æ¹ãåãããã«åãåããã¾ãã
fill: ç½®æã³ã³ãã³ãã¯ãè¦ç´ ã®ã³ã³ãã³ãããã¯ã¹å¨ä½ãåãããµã¤ãºã«ãªãã¾ãããªãã¸ã§ã¯ãå¨ä½ãå®å¨ã«ããã¯ã¹ã®ä¸ãåãã¾ãããªãã¸ã§ã¯ãã®ã¢ã¹ãã¯ãæ¯ãããã¯ã¹ã®ã¢ã¹ãã¯ãæ¯ã¨åããªãå ´åã¯ããªãã¸ã§ã¯ãã¯åãããã«å¼ãä¼¸ã°ããã¾ãã
none: ç½®æã³ã³ãã³ãã¯ãæ¡å¤§ç¸®å°ããã¾ããã
scale-down: ã³ã³ãã³ãã¯ none ã¾ãã¯ contain ãæå®ãããã®ããã«ãµã¤ãºãæ±ºãããããªãã¸ã§ã¯ãã®å®éã®ãµã¤ãºãå°ããã»ããæ¡ç¨ãã¾ãã

å¬å¼å®ç¾©

åæå¤	`fill`
é©ç¨å¯¾è±¡	ç½®æè¦ç´
ç¶æ¿	ãªã
è¨ç®å¤	æå®éã
ã¢ãã¡ã¼ã·ã§ã³ã®ç¨®é¡	é¢æ£å¤

å½¢å¼ææ³

object-fit = 
  fill                               |
  none                               |
  [ contain | cover ] || scale-down

ä¾

ç»åã« object-fit ãè¨å®

HTML

html

<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
</section>

CSS

css

h2 {
  font-family: "Courier New", monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid black;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}