適合在div上的圖像預覽

Question

我會盡力解釋我想要做的事情:)這是一張帶有一點草圖的圖片。

這就是我現在所做的，但我被卡住了。我正在使用Bootstrap 3.

我想將「Image00/01/02 - 縮略圖」移動到預覽框，我做了它，但我不知道如何製作具有該尺寸的框保持圖像對盒子尺寸「響應」，並且當您點擊「預覽」框時，圖像將全屏顯示以查看完整的尺寸和質量。

HTML

<div class="container" id="portfolio"> 
    <div class="col-md-12"> 




     <div class="w3-content" style="max-width:1200px"> 
      <img class="mySlides" src="img/image0.jpg" style="width:100%"> 
      <img class="mySlides" src="img/image1.jpg" style="width:100%"> 
      <img class="mySlides" src="img/image2.jpg" style="width:100%"> 

      <div class="w3-row-padding w3-section"> 
       <div class="w3-col s4"> 
        <img class="demo w3-border w3-hover-shadow" src="img/image0.jpg" style="width:100%" onclick="currentDiv(1)"> 
       </div> 
       <div class="w3-col s4"> 
        <img class="demo w3-border w3-hover-shadow" src="img/image1.jpg" style="width:100%" onclick="currentDiv(2)"> 
       </div> 
       <div class="w3-col s4"> 
        <img class="demo w3-border w3-hover-shadow" src="img/image2.jpg" style="width:100%" onclick="currentDiv(3)"> 
       </div> 
      </div> 
     </div> 




    </div> 
</div> 


<script> 

    var slideIndex = 1; 
    showDivs(slideIndex); 

    function plusDivs(n) { 
    showDivs(slideIndex += n); 
    } 

    function currentDiv(n) { 
    showDivs(slideIndex = n); 
    } 

    function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo"); 
    if (n > x.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = x.length} ; 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" w3-border-red", ""); 
    } 
    x[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " w3-border-red"; 
    } 

</script> 

而這裏的CSS

/* COL-MD-12 */ 

.col-md-12 { height: 550px; background-color: #fff; text-align: center; margin-top: -20px; padding-top: 45px; } 

/* COL-MD-4 

#img1 { height: 200px; width: 200px; background-color: #333; color: #fff; margin-left: 80px; } 
#img01 { height: 200px; width: 200px; position: center; } */ 

下面是從代碼的更新：

<div class="container" id="portfolio"> 
    <div class="col-md-12"> 

       <div class="w3-content"> 
       <div id="containerSlider"> 
        <img class="mySlides" src="img/image0.jpg" style="width:100%"> 
        <img class="mySlides" src="img/image1.jpg" style="width:100%"> 
        <img class="mySlides" src="img/image2.jpg" style="width:100%"> 
       </div> 

       <div id="containerThumbnails">  
        <div class="w3-row-padding w3-section"> 
         <div class="w3-col s4"> 
          <img class="demo w3-border w3-hover-shadow" src="img/image0.jpg" style="width:100%" onclick="currentDiv(1)"> 
         </div> 
         </div> 
         <div class="w3-col s4"> 
          <img class="demo w3-border w3-hover-shadow" src="img/image1.jpg" style="width:100%" onclick="currentDiv(2)"> 
         </div> 
         <div class="w3-col s4"> 
          <img class="demo w3-border w3-hover-shadow" src="img/image2.jpg" style="width:100%" onclick="currentDiv(3)"> 
         </div> 
       </div>  

       </div> 
    </div> 

</div> 


<script> 

    var slideIndex = 1; 
    showDivs(slideIndex); 

    function plusDivs(n) { 
    showDivs(slideIndex += n); 
    } 

    function currentDiv(n) { 
    showDivs(slideIndex = n); 
    } 

    function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo"); 
    if (n > x.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = x.length} ; 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" w3-border-red", ""); 
    } 
    x[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " w3-border-red"; 
    } 

</script> 

CSS

/* Container_Slider */ 

#containerSlider { height: 219px; width: 897px; background-color: #333; display: inline-block; } 
#containerThumbnails { height: 122px; width: 242px; background-color: #333; display: inline-block; } 

Answer 1

爲了保持圖像對盒子尺寸的響應，請在圖像上使用width: 100%。