Question 202332 in Html Question posted in
Some basic documentation can be found here.

Html – obect-fit: cover not working on elements with position: fixed

I need some kind of parallex effect on an image. So I need the image to cover the area and be fixed at the same time.

Look at my Example:
https://codepen.io/markus-burda/pen/poQWRRj

.wrapper {
  border: 1px solid black;
  height: 500px;
  width: 600px;
  position: relative;
  margin: 20px auto;
  clip-path: inset(0 0 0 0);
}

.image {
  position: fixed;
  display: block;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  width: 100%;
}
<div class="wrapper">
  <img class="image" src="http://placekitten.com/1000/1000" />
</div>

When I remove the position: fixed; property, the object-fit: cover works properly.

Anyone a solution?

Image should be fixed and the the image should expand correctly inside the wrapper, how to expect from object-fit: cover;

Tags:

2

Answers


  1. 0

    position fixed will not inherit height width from parent element. you’ll need to give specific height width to image element.

    .image {
    position: fixed;
    display: block;
    height: 500px;
    object-fit: cover;
    width: 600px;
}
    Login or Signup to reply.
  2. 0

    position: fixed; with width and height of 100% doesn’t inherit its parent’s dimentions.

    However if the parent of it has width and height assigned explicitly, you may use value of inherit to inherit its dimention.

    width: inherit;
height: inherit;

    .wrapper {
  border: 1px solid black;
  height: 500px;
  width: 600px;
  position: relative;
  margin: 20px auto;
  clip-path: inset(0 0 0 0);
}

.image {
  position: fixed;
  display: block;
  object-fit: cover;
  /* inherit width and height from parent */
  width: inherit;
  height: inherit;
}
    <div class="wrapper">
  <img class="image" src="http://placekitten.com/1000/1000" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search