Question

所以我有一个影院的剧院视图（就像点击图片时的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; }

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

祝你好运！

在剧院视图上像Facebook一样调整图像大小

1 个答案: