如何調整圖像大小以適合特定的縮略圖寬度/高度？

Question

我正在嘗試創建一個基本的圖像預覽框，在其中您會在左側看到一個大圖像，在右側看到一組小圖像作為縮略圖。

我需要縮略圖不要超過特定的寬度/高度，以使它們保持整潔的順序，以使觀看更加愉悅。

我嘗試過的事情：我了解了最大寬度和最大高度...如下面的代碼所示，我已經嘗試了這兩種方法，但是盡管專門設置了最大高度和寬度，它們仍然會擴展並制作縮略圖笨拙的尺寸。

我究竟做錯了什么？

提前致謝！

問題：

http://puu.sh/2VfR6.png

HTML：

<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            <?php
                echo "<div class='pBoxLargeImageContainer'>";
                echo "<img src='$pictureLinks[0]' alt='Primary Image' class='pBoxLargeImage'>";
                echo "</div>";
            ?>
        </div>
        <div class="pBoxRightColumn">
            <?php
            foreach ($pictureLinks as $picture) 
            {
                echo "<div class='pBoxThumbnailContainer'>";
                echo "<img src='$picture' alt='Thumbnail' class='pBoxThumbnail'>";
                echo "</div>";
            }
            ?>
        </div>
    </div>
</div>

CSS：

.pictureBoxContainer {
    margin-top: 300px;
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #F7D961;
    border-radius: 12px;
    max-height: 600px;
}

.pictureBox {
    background-color: #FFF;
    border-radius: 12px;
    width: 97%;
    overflow: auto;
    padding: 12px;
}

.pBoxLeftColumn {
    display: block;
    float: left;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
}

.pBoxRightColumn {
    display: block;
    float: right;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
}

.pBoxSmallImageContainer {
    max-height: 20%;
    max-width: 20%;
    float: left;
    padding: 3px;
    margin: 3px;
    background-color: #F7D961;
    border-radius: 2px;
}

.pBoxSmallImage {
    padding-top: 2px;
}

.pBoxLargeImageContainer {
    width: 100%;
}

.pBoxLargeImage {
    border-radius: 6px;
    min-width: 450px;
}

Answer 1

您在錯誤的元素上設置了max-width和max-height 。 而是將它們設置在.pBoxThumbnail 。