Resize image like Facebook on theatre view - html

Question

So I have a theatre view for pictures( just like Facebook when clicking on a picture) and every time I resize the browser I want the picture to be resized along with the browser, I have tried many things, nothing seems to be working.
Here is the html:
<div class="fullView" id="photoView" alt="close">
<div class="tableDisp">
<div class="tableCell" id="tableCell">
<div class="_n3">
<div class="theatreFloated">
<div class="theatreHolder">
<div class="imageHolder clearfix">
<img class="imageTheatre" id="imageTheatre" src="#">
</div>
</div>
</div>
<div class="infoHolder">
<div class="photoUser">
<p>gabryel</p>
</div>
</div>
<div class="exitView">
<img src="<? echo APP_PATH; ?>public/cuts/exit.png" width="15px" title="Close">
</div>
</div>
</div>
</div>
</div>
The CSS:
.fullView{position:absolute;background:rgba(0,0,0,0.9);height:100%;width:100%;z-index:400;top:0px;bottom:0px;min-height:100%;display:none;}
.fullView .tableDisp{height:100%;width:100%;display:table;}
.tableCell{display:table-cell;vertical-align:middle;text-align:center;}
._n3{display:inline-block;margin:20px;position:relative;overflow:hidden;padding:10px;}
.theatreFloated{float:left;}
.theatreHolder{position:relative;height:500px;width:500px;background:black;display:table-cell;vertical-align:middle;}
.imageTheatre{max-width: 100%;height: auto;width: auto\9;display:inline-block;vertical-align:middle;}
.infoHolder{width:300px;background:#5B748A;float:left;text-align:left;}
.exitView{position:absolute;right:5px;top:5px;cursor:pointer;}
Thank you for the help.

Answer 1

I think you're over-complicating the problem here... All you really need to resize the image depending on the browser window is setting its max-height and max-width as a % relative to the window size. Simplify your theatreview type HTML to:
<div class="fullview" id="photoview" alt="close">
<img class="imageTheatre" id="imageTheatre" width="auto" src="#" />
<span> Image by blah blah... </span>
<div class="exitView">
<img src="<? echo APP_PATH; ?>public/cuts/exit.png" width="15px" title="Close">
</div>
</div>
Then you can actually start setting these as % relative to the window in your css:
#fullview{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
#imageTheatre{ position: relative; max-width: 80%; max-height: 80%; display: block; margin: 0 auto; }
#fullview span{ position: relative; display: block; margin: 20px auto; width: 400px; }
then resize your screen and the image will resize... I haven't tested the code, so I am just giving this to you as a simple method which I have used in the past!
Good luck!