eiranix Posted May 9, 2014 Share Posted May 9, 2014 (edited) Can anyone help me with this? I want an image to be in the center of the screen inside a div wrap. The image needs to be flexible when the window sizes. What I have at the moment is just about right except that the image is getting cut off a bit on the right side.... I had it working with the image on its own but I now have a need to have that inner div there in order to put an 'after' on it later. .show { position:fixed; overflow:hidden; left:0px; top:0px; height:100%; width:100%; z-index:10; text-align:center; vertical-align: middle;}.show div { display:inline-block; margin:10%; vertical-align: middle; border:3px solid red; overflow:hidden;}.show img { vertical-align: middle; position:relative; border:8px solid #ffffff; width:100%; height:auto;}.helper { display: inline-block; height: 100%; vertical-align: middle;} <div id="zoomcontainer" class="show"> <div> <img id="zoom" alt="Enlarged Image" src="http://winniecooper.net/flores/pics/snow%20umbrella.jpg"/> </div> <span class="helper"></span></div> Edited May 9, 2014 by eiranix Link to comment Share on other sites More sharing options...
eiranix Posted May 12, 2014 Author Share Posted May 12, 2014 Anyone? Link to comment Share on other sites More sharing options...
dsonesuk Posted May 13, 2014 Share Posted May 13, 2014 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> .show { position:fixed; overflow:hidden; left:0px; top:0px; height:100%; width:100%; z-index:10; text-align:center; vertical-align: middle; } .show div { display:inline-block; margin:10%; vertical-align: middle; border:3px solid red; overflow:hidden; padding: 10px; } .show img { vertical-align: middle; position:relative; /*border:8px solid #ffffff;*/ width:100%; height:auto; } .helper { display: inline-block; height: 100%; vertical-align: middle; } </style> </head> <body> <div id="zoomcontainer" class="show"> <div> <img id="zoom" alt="Enlarged Image" src="http://winniecooper.net/flores/pics/snow%20umbrella.jpg"/> </div> <span class="helper"></span> </div> </body></html> Link to comment Share on other sites More sharing options...
eiranix Posted May 13, 2014 Author Share Posted May 13, 2014 Perfect, thanks dsonesuk! That was a simple fix, I can't believe I didn't think of that... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now