在劇院視圖中調整像Facebook一樣的圖像

因此，我有一個用於圖片的劇院視圖（就像點擊圖片時的Facebook一樣），每當我調整瀏覽器大小時，我都希望圖片隨瀏覽器一起調整大小，許多事情，似乎沒有任何工作。下面是HTML：在劇院視圖中調整像Facebook一樣的圖像

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

的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;}

謝謝你的幫助。

來源

2014-03-13 southpaw93

我認爲你在這裏過度複雜的問題...所有你真的需要調整圖像的大小取決於瀏覽器窗口設置其最大高度和最大寬度相對於窗口大小的％。簡化您的theatreview類型的HTML：

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

然後你就可以真正開始將這些設置爲相對於你的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; }

然後調整屏幕，圖像將調整...我沒有測試過這些代碼，所以我只是把它作爲我過去使用的簡單方法給你的！

祝你好運！

來源

2014-03-13 15:42:37 user3415605

在劇院視圖中調整像Facebook一樣的圖像

回答

相關問題