html - 在影院 View 中像 Facebook 一样调整图像大小

Question

所以我有一个图片的剧院 View (就像点击图片时的 Facebook)，每次我调整浏览器大小时我希望图片随浏览器一起调整大小，我尝试了很多东西，似乎没有什么在职的。这是 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>

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

谢谢你的帮助。

Answer 1

我认为您在这里使问题过于复杂...根据浏览器窗口调整图像大小真正需要的是将其最大高度和最大宽度设置为相对于窗口大小的百分比。将您的 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; }

然后调整屏幕大小，图像将调整大小...我还没有测试代码，所以我只是把它作为我过去使用过的一种简单方法提供给您!

祝你好运!