將圖像調整爲自舉模態窗口

Question

我正在創建一個產品庫，其中會有許多產品，當用戶單擊其中任何一個時，模態窗口將彈出放大圖像。

我主要研究它是如何工作的，除了圖像溢出超出模態窗口。

我希望添加一些設置，以便不管圖像的尺寸如何，模態窗口和圖像的大小保持一致。

我在此鏈接創建樣本視圖：

jsfiddle

這裏是HTML代碼。 HTML：

<div class="col-lg-3"> 
    <a href="#" class="subproduct2 subproduct thumbnail"> 
     <div class="caption"> 
      <h4 class="">Universal Studios</h4> 
     </div> <img src="http://www.lastrawberryfest.com/wp-content/uploads/2013/02/Travel-to-the-Heart-of-Los-Angeles-Best-places-to-visit.jpg" 
     alt="..." class="img-responsive"> 
    </a> 
</div> 

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <img src="" id="imagepreview" > 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

@media only screen and (min-device-width : 768px) { 
    .productbox, .subproduct { 
     background-color: black; 
    } 
    .subproduct>img { 
     height: 20%; 
     width: 20%; 
    } 
} 

的Javascript：

$(document).ready(function() { 

    $(".subproduct2").click(function(elem) { 
    $('#imagepreview').attr('src', $(this).find("IMG").prop('src')); 
     $('#imagemodal').modal('show'); 
     }); 
    }); 

請讓我知道我在這裏失蹤。 謝謝

更新 我已經得到了模態和模態圖像的工作。但現在模型窗口是問題。

我的網頁有各種尺寸的圖像，由於這個模式窗口的尺寸根據圖像大小而變化，並且也會在不同的屏幕位置（垂直和水平軸）上對齊自己。

如何設置模態的大小，使其與圖像尺寸無關而保持一致。我很好的圖像縮放到可用的div區域。

我已在此鏈接創建示例視圖：jsfiddle 以下是更新的代碼。 HTML：

<div class="col-lg-3"> 
    <a href="#" class="subproduct1 subproduct thumbnail"> 
     <div class="caption"> 
      <h4 class="">CBS Star Gaze</h4> 
     </div> <img 
     src="https://cbsla.files.wordpress.com/2013/08/72371116.jpg" 
     alt="..." class="img-responsive"> 
    </a> 
</div> 
<div class="col-lg-3"> 
    <a href="#" class="subproduct2 subproduct thumbnail"> 
     <div class="caption"> 
      <h4 class="">Universal Studios</h4> 
     </div> <img src="http://www.lastrawberryfest.com/wp-content/uploads/2013/02/Travel-to-the-Heart-of-Los-Angeles-Best-places-to-visit.jpg" 
     alt="..." class="img-responsive"> 
    </a> 
</div> 
<div class="col-lg-3"> 
    <a href="#" class="subproduct3 subproduct thumbnail"> 
     <div class="caption"> 
      <h4 class="">Disney Land</h4> 
     </div> <img 
     src="http://www.topplacestotravel.net/gallery/places-to-visit-in-los-angeles/disneyland_and_california_adventure_los_angeles.jpg" 
     alt="..." class="img-responsive"> 
    </a> 
</div> 

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <img src="" id="imagepreview" > 
     </div> 
    </div> 
    </div> 
</div> 

的Javascript：

$(document).ready(function() { 

    $(".subproduct1").click(function(elem) { 
     $('#imagepreview').attr('src', $(this).find("IMG").prop('src')); 
     $('#imagemodal').modal('show'); 
    }); 

    $(".subproduct2").click(function(e) { 
     $('#imagepreview').attr('src', $(this).find("IMG").prop('src')); 
     $('#imagemodal').modal('show'); 
    }); 

    $(".subproduct3").click(function(e) { 
     $('#imagepreview').attr('src', $(this).find("IMG").prop('src')); 
     $('#imagemodal').modal('show'); 
    }); 
    }); 

CSS：

@media only screen and (min-device-width : 768px) { 
    .productbox, .subproduct { 
     background-color: black; 
    } 
    .subproduct>img { 
     height: 20%; 
     width: 20%; 
    } 
} 
#imagepreview { 
    width: 100%; 
} 

Answer 1

只需設置你的形象width到100%。由於您的圖像有imagepreview ID只是添加到您的CSS：

#imagepreview { 
    width: 100%; 
}