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


so after long time of searching, found out how crop image without distorting/squashing image using overflow: hidden;. next problem; how have image show part want, meaning, when using overflow:hidden shows image top of rather middle or bottom. how can adjust , show image bottom or middle? give better understanding, please view images below created in photoshop. image description in order: default image, css in default overflow: hidden, want (middle pov), want (bottom pov).
thanks.
edit: layout is: parent div image div child. parent div's height defined @ 600px , width @ 100%. , height , width of image div defined 100%. default size

what css defaultly does

what want (middle pov) what want (bottom pov)

assuming desired width/height , overflow: hidden applied outer containing div, can add like:

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

this move displayed area of image down 50% of container height (top: 50%), 50% of image height (transform: translatey(-50%)), ends centering inside container.

you can adjust these values achieve different positioning, or add in left: , transform: translatex() adjust horizontal axis.


Comments