RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/object-fit below:

object-fit · WebPlatform Docs

object-fit Summary

The object-fit property defines how content of a replaced element (e.g., a video or an image) is made to fit the dimensions of its containing box.

Overview table

Initial value: fill
Applies to: Replaced elements
Inherited: No
Media: visual
Computed value: As specified
Animatable: No
CSS Object Model Property: objectFit

Syntax

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

Values

fill: The replaced content is sized to fill the element’s box
contain: The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box
cover: The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box
none: The replaced content is not resized to fit inside the element’s content box
scale-down: Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size

Examples

Five simple img elements.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Object-fit example</title>
  <link href="content-fit.css" type="text/css" rel="stylesheet">
</head>
<body>

  <img src="/logo/wplogo_pillow_wide_tan.png"
      alt="Webplatform Logo" class="fill"/>
  <img src="/logo/wplogo_pillow_wide_tan.png"
      alt="Webplatform Logo" class="contain"/>
  <img src="/logo/wplogo_pillow_wide_tan.png"
      alt="Webplatform Logo" class="cover"/>
  <img src="/logo/wplogo_pillow_wide_tan.png"
      alt="Webplatform Logo" class="none"/>
  <img src="/logo/wplogo_pillow_wide_tan.png"
      alt="Webplatform Logo" class="scale-down"/>

</body>
</html>

All five images are forced to 150x100 pixels, different from both the original size of the image (196x77 pixel) and its aspect ratio.

img {
  float: left;
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin-right: 1em;
}
.fill {
  object-fit: fill;
  
}
.contain {
  object-fit: contain;
  
}
.cover {
  object-fit: cover;
  
}
.none {
  object-fit: none;
  
}
.scale-down {
  object-fit: scale-down;
  
}

View live example

Related specifications

CSS Image Values and Replaced Content Module Level 3: W3C Candidate Recommendation

See also Related articles Generated and Replaced Content

Multimedia

Video

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4