Using object-fit: cover and object-position: 50% 50% will not position the image in the center of the container

Within a container, I have an image set up like this:

.container {
  height: auto;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

img {
  width: 100%;
  min-width: 500px;
  object-fit: cover;
  object-position: 50% 50%;
}
<div class="container">
  <img src="https://s.tmimgcdn.com/blog/wp-content/uploads/2016/04/1-9-2.jpg?x47994" alt="">
</div>

The image adjusts within the container based on screen size but I want it to always be centered using object-fit and object-position properties.

In my current setup, the object-position property does not respond to percentage values, only pixels.

EDIT: Can someone explain why object-position doesn't work with percentages in my example?

css

Answer №1

The missing piece here is to include height: 100%; in the img styles

Answer №2

To make the image fill the entire space, add height:100% and width:100% to the image tag

Answer №3

To ensure your image is properly displayed, include position: absolute; and height: 100% in your CSS for the image element. Your updated code should look like this:

img {
  width: 100%;
  height: 100%
  min-width: 500px;
  object-fit: cover;
  object-position: center center;
  position: absolute;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying php variables using inline styles

I've come across similar inquiries but none quite like this. Within a database, I have stored hexadecimal values for the background and border colors of a specific division. I have confirmed that I am retrieving them from the database. To put it blunt ...

phphtmlmysqlcssbackground-color

The jQuery plugin for mmenu does not activate the selected menu item

I recently implemented a jQuery menu plugin that I found on Overall, everything is functioning correctly. However, I am encountering an issue where the active state is not displayed when selecting a sub menu. Instead, it keeps redirecting to the main page ...

javascriptjquerycss

Adjust the dimensions of the embedded Google document

Currently, I am in the process of developing a website for my initial client and I'm encountering some difficulty in adjusting the size and background color of an embedded google doc. If anyone could provide assistance, it would be greatly appreciated ...

htmlcss

Discover how to utilize Firebug in Java to access a node's CSS properties

Is there a way to access all properties (CSS, etc) of web page nodes using Firebug within Java code without relying on XPath? I would like to retrieve all available properties instead of checking for them individually. Any advice on how to achieve this? ...

cssseleniumwebdriverselenium-webdriverfirebug

What steps do I need to take to enlarge an image when it is clicked?

I am working on a gallery project and I would like each photo to expand to full screen when clicked, similar to this example: https://i.sstatic.net/nRWsV.jpg Currently, my code includes a click handler on each image that adds a class zoom to the clicked ...

javascripthtmlcss

Align the text in the center of the image, which is depicted as a bullet point

I am currently using images as bullet points for my Github Pages (markdown files), following the instructions outlined here. My goal now is to vertically center the text next to the image. This is demonstrated here (cf. lower third of page), however, I am ...

htmlcssmarkdowngithub-pagesinline-styles

Inadequate text alignment

Trying to create a header mockup for a website featuring branding elements like a logo and brand name. Utilizing Angular.js for the webpage development process, incorporating a URL for the logo image from an online source. Encountering alignment issues th ...

htmlcssangularjstext-alignment

``There is an issue with elements not remaining within the boundaries of the div that has

http://codepen.io/apswak/pen/qNQxgA Has anyone encountered issues with nesting elements inside a header with a background image? I'm facing the problem where every element I place inside gets pushed above the background image. Is there a more effecti ...

htmlcss

I am looking for two divs or table cells to float alongside each other, with one set to display:inline and the other expanding to fill the remaining space of the row

What I desire: My current accomplishment: I successfully floated both DIV tags side by side and also experimented with tables. My goal is to have the HR line fill the remaining horizontal space that the title does not occupy. However, I prefer not to us ...

htmlcss

How can CSS and JavaScript be used to strategically position two upright images next to each other within a dynamically resizing container?

Looking for a way to display two portrait images side by side within a flexible container with 100% width? The challenge I'm facing is accommodating varying widths of the images while ensuring they are the same height. <div class="container"> ...

javascriptcssflexbox

Tips for customizing the appearance of dayMouseover in Fullcalendar

While working on my Angular application, I encountered an issue with the Fullcalendar plugin. Specifically, I want to dynamically change the cell color when hovering over a time slot in AgendaWeek view (e.g. 7.30am-8.00am). I am striving for something like ...

htmlcssangularjsfullcalendar

What is the recommended Vue js lifecycle method for initializing the materialize dropdown menu?

https://i.stack.imgur.com/cjGvh.png Upon examining the materialize documentation, it is evident that implementing this on a basic HTML file is straightforward: simply paste the HTML code into the body and add the JavaScript initializer within a script tag ...

javascripthtmlcssvue.jsmaterialize

Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can ...

htmlcssbootstrap-4

How to Preserve Scroll Position when Toggling a Div using jQuery

I've been struggling to find a solution for maintaining the scroll position of my page after a JQUERY toggle event. I've searched extensively but haven't found a fix yet. <script src="Scripts/_hideShowDiv/jquery-1.3.2.min.js" type="text/ ...

javascriptjqueryhtmlasp.netcss

Arranging CSS elements in a stacked manner with fixed or absolute positioning

#snackbar { min-width: 350px; /* Default minimum width */ margin-left: -125px; /* Center value of min-width */ background-color: #333; /* Black background color */ color: #fff; /* White text color */ text-align: center; /* Cen ...

htmlcss

When viewing a page in IE 9 within a frame, not all CSS styles are properly rendered, causing it to enter Quirks mode

When a web page is loaded within a frame, not all of its styles are applied. The specific stylesheet used for the div elements is as follows: div.super{ position:absolute; font-family: Helvetica; font-size: 0.75em; padding:4px; overflo ...

cssinternet-explorer-9framesquirks-mode

Is it possible to place a pseudo-element beneath the background of its parent element?

I'm working on a website with a fixed header containing a main menu and a second level menu. I want the second level menu to slide in underneath the background of its parent element. Can this be done? Here's an example: `https://codepen.io/anon/ ...

cssclass

Issues with CSS Styling not being applied properly on mobile devices in a React App deployed on Heroku

The Dilemma My React app is deployed on Heroku using create-react-app for bundling. The backend is a Node.js written in Typescript with node version 10.15.3. Locally, when I run the site using npm start, everything works perfectly. However, when I view t ...

cssnode.jsreactjstypescriptheroku

Scripting events in JavaScript/jQuery are failing to trigger on elements located inside nested <div> containers

I am currently developing a simple RSS reader application where, upon clicking a 'story', the relevant information is displayed in a modal view. The 'stories' or RSS feed items are presented in a scrolling row. However, I have encounte ...

javascriptjqueryhtmlruby-on-railscss

The background-size:cover property fails to function properly on iPhone models 4 and 5

I have taken on the task of educating my younger sister about programming, and we collaborated on creating this project together. Nicki Minaj Website However, we encountered an issue where the background image does not fully cover the screen when using b ...

javascripthtmlcssbackground