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

Popular posts from this blog

node.js - Using Node without global install -

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

java - Null response to php query in android, even though php works properly -