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%.
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
Post a Comment