html - Centering Image in DIV horizontally and vertically - cut off overflow -
i trying center images both vertically , horizontally (so see center/middle) of image in containing div. , cut off overflow. have working pretty right now, images not centered yet. here fiddle link: http://jsfiddle.net/pp74fb7b/4/
i have looked @ of similar stackoverflow questions, none of solutions have worked in scenario. have looked on internet solution. last resort.
i can't use javascript project. need pure css solution.
.squaregallerywrap { width: 285px; height: 285px; } .squaregallerywrap img { min-width: 100%; min-height: 100%; max-height: 285px; display:block; margin:auto; } li { float: left; overflow: hidden; -webkit-transition: 0.4s linear; transition: 0.4s linear; }
fiddle: http://jsfiddle.net/pp74fb7b/5/
just add following image:
.squaregallerywrap img{ position:relative; left:50%; -moz-transform:translatex(-50%); -webkit-transform:translatex(-50%); -ms-transform:translatex(-50%); -o-transform:translatex(-50%); transform:translatex(-50%); }
Comments
Post a Comment