1.點選圖片放大縮小的思路

圖片部分：

<table>
  <div>
      <img style="width:62px;height:83px;display:block" src="${photourl}" onclick="showMaxImg(this)">
  </div>
</table>

思路一：點選圖片，然後在bootstrap裡面的模態框（modal）放大，再點選放大後的圖片，圖片恢復正常。(使用bootstrap需要引入)

<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myLargeModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg" style="display:inline-block;width:auto;">
       <div class="modal-content">
           <div id="imgshow"></div>
        </div>
      </div>
    </div>
 

第一個div裡面必須要有modal，標明使用的是模態框。text-center:居中顯示；aria-hidden：true；圖片未點選時隱藏。

js部分：

function showMaxImg(obj){
   var src=$(obj).attr("src");
   $("#imgModal").find("#imgshow").html("<img src='"+src+"' class='carousel-inner img-responsive img-rounded' data-dismiss='modal'>");
$("#imgModal").modal('show');
}
 

思路二：使用hover（滑鼠指標浮動在上面的元素）選擇器，滑鼠浮動在需要放大的圖片上，圖片放大，且相對靠右顯示（我在實現的過程中遇到的問題是圖片在表格靠近瀏覽器邊緣的位置，放大之後讓圖片相對靠右顯示）

我這裡僅使用樣式的方法進行修改：

img{
  cursor:pointer;//滑鼠手型
  transition:all 0.6s ease-in-out;//過渡
}
table img:hover{
  display:block;
  transform：scale(5);//放大5倍
  margin-left:20%;//可根據實際情況調節，避免螢幕左邊遮擋住照片的一部分
}
 

2.補充：

獲取螢幕的解析度：window.screen.width，

display:block讓a變成塊級元素，可以跟div一樣有高度、寬度、行高，否則寬度、高度是無效的。