Jump to content

Center flexible image inside div container


eiranix
 Share

Recommended Posts

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 by eiranix
Link to comment
Share on other sites

<!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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...