Home
Blogs
Questions
Jobs
Monetize

Home

About Us

Blogs

Questions

Jobs

Monetize

Post Job

banner

Questions about object-fit

Read more about object-fit

python (12.9k questions)

javascript (9.2k questions)

reactjs (4.7k questions)

java (4.2k questions)

java (4.2k questions)

c# (3.5k questions)

c# (3.5k questions)

html (3.3k questions)

Questions - object-fit

Why doesn't `width:100%; height:100%; object-fit: contain;` make a <video> fit its container?

So I have a page with a grid layout, with a header and a footer and a black content container in the middle. html, body { height: 100%; margin: 0; padding: 0; } .container { display: grid...
test-img

Peter Olson

html

css

video

css-grid

object-fit

Votes: 0

Answers: 1

Latest Answer

1fr The first thing you need to know is that 1fr is equivalent to minmax(auto, 1fr), meaning that the container won't be smaller than its content, by default. So, start by replacing 1fr with minmax(0,...
test-img

Michael Benjamin

How to calculate the rendered dimensions of an image styled with object-fit: contain

I have this simple html showing an image. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <titl...
test-img

Janghou

html

css

image

browser

object-fit

Votes: 0

Answers: 1

Latest Answer

According to the specs The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. So you have to take both the aspect ratio of the image (iAR) and th...
test-img

Janghou

Posts

Questions

Blogs

Jobs

The ultimate platform for coders and IT specialists

About

  • Company
  • Support

  • Platform

  • Terms & Conditions
  • Privacy statement
  • Cookie policy
  • Cookie option
  • OnlyCoders © 2025  |  All rights reserved