Reputation: 81
I have an img in a container that is half of the containers height. The img is too big, so I'm using the object-fit property, however it's cutting the img off at the top. I'm using the following CSS and no matter what value I enter in the background-position property it doesn't do anything.
.testbox img {
position: relative;
display: table-cell;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
overflow: hidden;
height: 150px;
-o-object-fit: cover;
object-fit: cover;
Can anyone see anything wrong with what I'm doing? Any pointers would be really appreciated!
Thanks
Upvotes: -1
Views: 181
Reputation: 556
The background-position
property is only for background images
You could use the property object-position
for your img
.
https://css-tricks.com/on-object-fit-and-object-position/
Upvotes: 1