div에 이미지 미리보기

Question

내가 뭘하고 싶은지 설명하려고 시도합니다 :) 다음은 약간의 스케치가있는 그림입니다.

이것은 내가 잠시 동안 한 일이지만, 막혔습니다. 부트 스트랩 3을 사용하고 있습니다.

"Image00/01/02 - Thumbnails"를 미리보기 상자로 이동시키고 싶습니다. 그랬지만 그 크기로 상자를 만드는 방법을 모르겠습니다. 이미지를 상자 크기에 "반응 적"으로 유지하고 "미리보기"상자를 클릭하면 이미지가 전체 화면으로 이동하여 전체 크기와 품질을 볼 수 있습니다. 여기에 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%을 사용하십시오.