在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%。