Sat10 Sat10 - 4 months ago 14
CSS Question

How to move the POV of an image when using overflow: hidden?

So after a long time of searching, I finally found out how to crop an image without distorting/squashing an image using

overflow: hidden;
.
Now my next problem; How would I have the image show a part I want, meaning, when using the
overflow:hidden
it shows the image from the top of it rather than the middle or bottom. How can I adjust that and show the image from the bottom or middle? To help give a better understanding, please view the images below which I created in photoshop. Image description in order: default image, what css does in default with overflow: hidden, what I want (middle pov), what I want (bottom pov).
Thanks
Default Size

what css defaultly does

what i want it do (middle pov)
what i want it do (bottom pov)

Answer

Assuming your desired width/height and overflow: hidden is applied to an outer containing div, you can add something like:

.container img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

This would move the displayed area of the image down 50% of the container height (top: 50%), then back up 50% of the image height (transform: translateY(-50%)), which ends up centering it inside the container.

You can adjust these values to achieve different positioning, or add in left: and transform: translateX() to adjust the horizontal axis.